Html 调整图像大小以适合 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8636594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize an image to fit in div
提问by blue-sky
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;
}
回答by anuj_io
#piecemaker-container div, #piecemaker-container img {
width: 100%;
height: 100%;
}
This should do it.
这应该做。
回答by Shiv Kumar Ganesh
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%; }
回答by shawndreck
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?
希望能帮助到你？
回答by Alex
Why don't you set the widthand heightattributes of the img-tag?
为什么不设置-tag的width和height属性img？
<img src="splash.jpg" alt="some_text" width="960" height="460"/>
回答by Minu Alex
$("#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%");
});
