如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
下面的代码改编自以前的答案,由我使用名为storm.jpg的图像进行测试。
这是显示图像的简单页面的完整HTML代码。这很完美,我用www.resizemybrowser.com测试过。把CSS代码放在HTML代码的顶部,放在你的头部下面。把图片代码放在你想要的地方。
<html>
<head>
<style type="text/css">
#myDiv
{
height: auto;
width: auto;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
其他回答
解决方法很简单,只需要一点数学。。。
只需将图像放在div中,然后放在指定图像的HTML文件中。使用图像的像素值以百分比形式设置宽度和高度值,以计算宽度与高度的精确比率。
例如,假设您的图像宽度为200像素,高度为160像素。您可以放心地说,宽度值将为100%,因为它是较大的值。要计算高度值,只需将高度除以宽度即可得到80%的百分比值。在代码中,它看起来像这样。。。
<div class="image_holder_div">
<img src="some_pic.png" width="100%" height="80%">
</div>
正如这里所回答的,你也可以使用vh单位而不是最大高度:如果它在你的浏览器(如Chrome)上不起作用,100%:
img {
max-height: 75vh;
}
您可以将图像设置为div的背景,然后使用CSS background size属性:
background-size: cover;
它将“将背景图像缩放到尽可能大,以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools
不要将显式宽度或高度应用于图像标记。相反,给它:
max-width:100%;
max-height:100%;
此外,高度:自动;如果只想指定宽度。
例子:http://jsfiddle.net/xwrvxser/1/
国际货币基金组织{最大宽度:100%;最大高度:100%;}.肖像{高度:80px;宽度:30px;}.景观{高度:30px;宽度:80px;}.方形{高度:75px;宽度:75px;}纵向分区<div class=“纵向”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>景观部<div class=“landscape”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>方形分区<div class=“square”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>
如果您使用Bootstrap,只需将img响应类添加到img标记:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
引导映像