调整图像大小以适合div

How can I resize the image to fit in the size of the div piecemaker-container?

如何调整图像大小以适应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%;
}

Something like - ?

就像是 - ?

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

5 个解决方案

#1

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

This should do it.

这应该做到这一点。

#2

declare a css class for the img tag and just give it the same height and width as the div.Or just declare it as 100% as given

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

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

#3

This may sound like an overdo but if you don't want the image to be squeezed or stretched, why not re-size it proportionally, according to the size you want, before displaying? Because it is pretty much easy to re-size with PHP anyway

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

Hope it helps?

希望能帮助到你?

#4

Why don't you set the width and height attributes of the img-tag?

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

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

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

#1

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