Question

对不起，这可能是一个简单的问题（我只是一个初学者）。我在我的div中重新调整图片时遇到了一些困难。请看下面的代码并给我任何所需的反馈。谢谢。这是我的代码：

<html>

<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("img").hide().fadeIn(3000);  
        });
        console.log("It works!!");
    </script>
    <title>Fruit!</title>
    <style>
        .box1 {
            background-size: auto, cover;
            text-align: left;
            border: solid;
        }
        .red {
            margin-right: auto;
            margin-left: auto;
            display: block;
        }
        .box2 {
            background-size: auto, cover;
            text-align: left;
            border: solid;
        }
        .blue {
            margin-right: auto;
            margin-left: auto;
            display: block;
        }
        h1 {
            text-align: center;
            color: white;
            font-family: 'Tahoma' sans-serif;
            font-weight: 300;
            letter-spacing: 1px;
            font-size: 80px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <h1> The Stawberry </h1>
        <img class="red" src="http://pngimg.com/upload/strawberry_PNG88.png">
    </div>
    <div class="box2">
        <h1> The Blueberry </h1>
        <img class="blue" src="http://www.tree-ripe.com/_images/_blueberries/blueberries2.png">
    </div>
    <div class="box3">
        <h1> The Banana </h1>
        <img class="yellow" src="http://img4.wikia.nocookie.net/__cb20130806064943/clubpenguin/images/7/7c/Banana_clean_sheet.png">
    </div>
</body>

</html>

Answer 1

我认为有人已经发布了同样的问题。这是链接：Resize an image to fit in div

Answer 2

您应该尝试将width和height属性更改为您喜欢的属性，例如：

    #myImg {
        width: 100px;
        height: 100px;
    }

我希望这有帮助！

Answer 3

使用css高度和宽度。您可以在w3schools上查找以获得更多参考。我还提供了如何集中它的代码。好像你想要这样做。

 img { 
    width: 40px;
    height: 40px;
  // Below code will center it
    display: block;
    margin-left: auto:
    margin-right: auto;
   }

无法在div中调整图像大小

3 个答案: