如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
<style type="text/css">
#container{
text-align: center;
width: 100%;
height: 200px; /* Set height */
margin: 0px;
padding: 0px;
background-image: url('../assets/images/img.jpg');
background-size: content; /* Scaling down large image to a div */
background-repeat: no-repeat;
background-position: center;
}
</style>
<div id="container>
<!-- Inside container -->
</div>
其他回答
我使用以下代码修复了此问题:
<div class="container"><img src="image_url" /></div>
.container {
height: 75px;
width: 75px;
}
.container img {
object-fit: cover;
object-position: top;
display: block;
height: 100%;
width: 100%;
}
将图像所需的高度和宽度提供给包含<img>标记的div。不要忘记在正确的样式标记中给出高度/宽度。
在<img>标记中,将最大高度和最大宽度设置为100%。
<div style="height:750px; width:700px;">
<img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>
正确后,可以在适当的类中添加详细信息。
<style type="text/css">
#container{
text-align: center;
width: 100%;
height: 200px; /* Set height */
margin: 0px;
padding: 0px;
background-image: url('../assets/images/img.jpg');
background-size: content; /* Scaling down large image to a div */
background-repeat: no-repeat;
background-position: center;
}
</style>
<div id="container>
<!-- Inside container -->
</div>
事实证明,还有另一种方法可以做到这一点:对象拟合。
<img style='height: 100%; width: 100%; object-fit: contain'/>
将完成工作。当然,不要忘记包含其他必要的属性,如src和alt。
小提琴:http://jsfiddle.net/mbHB4/7364/
解决方法很简单,只需要一点数学。。。
只需将图像放在div中,然后放在指定图像的HTML文件中。使用图像的像素值以百分比形式设置宽度和高度值,以计算宽度与高度的精确比率。
例如,假设您的图像宽度为200像素,高度为160像素。您可以放心地说,宽度值将为100%,因为它是较大的值。要计算高度值,只需将高度除以宽度即可得到80%的百分比值。在代码中,它看起来像这样。。。
<div class="image_holder_div">
<img src="some_pic.png" width="100%" height="80%">
</div>