在 div 中调整图像大小时遇到问题答案

【问题标题】：Having trouble resizing image in div在 div 中调整图像大小时遇到问题
【发布时间】：2014-07-17 00:57:16
【问题描述】：

对不起，这可能是一个简单的问题（我只是一个初学者）。我在调整 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>

【问题讨论】：

请提供一些代码......可能存在问题，而不是一种方法来做你想做的事。
请展示你尝试了什么？

标签： jquery html css image resize

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

我希望这会有所帮助！

【讨论】：

【解决方案3】：

使用 CSS 高度和宽度。您可以在 w3schools 上查找以获取更多参考。我还包含了有关如何居中的代码。看起来你想这样做。

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

【讨论】：