调整图像大小以适合 div答案

【问题标题】：Resize an image to fit in div调整图像大小以适合 div
【发布时间】：2015-05-13 17:45:40
【问题描述】：

如何调整图像大小以适应 div piecemaker-container 的大小？

<div id="piecemaker-container"> 
    <div id="piecemaker">
      <img src="splash.jpg" alt="some_text"/>
    </div>
  </div>

#piecemaker-container {
    display:block;
    height:460px;
    overflow:hidden;
    margin: -10px auto 40px;
    width: 960px;
    max-width:100%; 
    max-height:100%;
}

类似 - ？

#piecemaker {
    display:block;
    height:460px;
    overflow:hidden;
    margin: -10px auto 40px;
    width: 960px;
}

【问题讨论】：

标签： html css

【解决方案1】：

#piecemaker-container div, #piecemaker-container img {
width: 100%;
height: 100%;
}

应该这样做。

【讨论】：

【解决方案2】：

为 img 标签声明一个 css 类，并为其赋予与 div 相同的高度和宽度。或者将其声明为给定的 100%

img { width: 100%; height: 100%; }

【讨论】：

【解决方案3】：

这听起来可能有点过头了，但是如果您不希望图像被挤压或拉伸，为什么不在显示之前根据您想要的大小按比例重新调整它的大小呢？因为无论如何用 PHP 调整大小非常容易

希望它有帮助吗？

【讨论】：

【解决方案4】：

为什么不设置img-tag 的width 和height 属性？

<img src="splash.jpg" alt="some_text" width="960" height="460"/>

【讨论】：

最好将样式规则保留在 HTML 和 CSS 文件之外。

【解决方案5】：

$("#piecemaker-container").each( function(){
                var imageUrl = $(this).find('img').attr("src");
                $(this).find('img').css("visibility","hidden");
                $(this).css('background-image', 'url(' + imageUrl + ')').css("background-repeat","no-repeat").css("background-size","cover").css("background-position","50% 50%");
            });

【讨论】：