我有一堆图像在div中一次显示一次。图像都是几千像素乘几千像素。
例如,一张图像是4353x2721。
当我预览页面时,它会放大图片并仅沿顶部和底部边缘切出东西。它保持正确的宽度。
我只需要调整它的大小即可使其适合屏幕/ div,而不会切割任何零件。
该部分的CSS是:
.largeImage img {
position:absolute;
top:0;
left:0;
width:100%;
}
如果添加
height:100%;
,它仍然不起作用。仍会放大。 最佳答案
您需要为图像设置max-width: 100%
和max-height: 100%
。它将使图像适应其较大尺寸以适应父容器限制,并缩小其他尺寸。
查看代码段:
.largeImage {
width: 150px;
height: 200px;
display: inline-block;
position: relative;
border: 1px solid green;
}
.largeImage img {
display: block;
position:absolute;
top:0;
left:0;
right: 0;
margin: 0 auto;
max-width:100%;
max-height:100%;
}
<div class="largeImage">
<img src="http://lorempixel.com/output/food-q-c-640-480-5.jpg">
</div>
<div class="largeImage">
<img src="http://lorempixel.com/output/nature-h-c-640-1233-7.jpg">
</div>