自動縮放？

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>