自动缩放？

Question

我有一堆图像被一次显示在一个div中。图像都是几千像素到几千像素。

例如，一个图像是4353x2721。

当我预览页面时，它会放大图片并沿着顶部和底部边缘切除东西。它仍然是正确的宽度。

我需要它来调整它的大小，以便它适合屏幕/ div正确无需切割任何部分。

该节的CSS是：

.largeImage img { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
} 

如果我添加height:100%;，它仍然无法正常工作。仍然放大。

Answer 1

您需要为图像设置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>