Question

如何调整图片大小以适合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;
}

Answer 1

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

这应该这样做。

Answer 2

为img标签声明一个css类，并给它提供与div相同的高度和宽度。或者只是将它声明为100％给定

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

Answer 3

这可能听起来像是一个过度但如果您不希望图像被挤压或拉伸，为什么不在显示之前根据您想要的尺寸按比例重新调整尺寸？因为用PHP重新调整大小非常容易

希望有帮助吗？

Answer 4

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

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

Answer 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%");
            });

调整图像大小以适合div

5 个答案: