如何在固定大小的div中正確顯示大圖像？

我有很多大的圖像具有不同大小（300x400，爲500x300 ...）。我想顯示在固定大小的div內正確縮放的大圖像。如何在固定大小的div中正確顯示大圖像？

例如，我有一個200x200格，和一個500 * 300的圖像。

|--------------------| 
|     | 
|     | 
| div(200x200)  | 
|     | 
|     | 
|--------------------| 

|--------------------------------| 
|        | 
|        | 
| image(500x300)    | 
|        | 
|        | 
|        | 
|        | 
|--------------------------------|

所以圖像的寬度將是200像素，高度將按比例縮放，併成爲300 * 200/500 = 125像素。圖像看起來會更小，但它保持不變，並且仍然看起來不錯。

|--------------------| 
|  Blank   | 
|--------------------| 
|     | 
| Image(200x125) |  # div (200x200) 
|     | 
|--------------------| 
|  Blank   | 
|--------------------|

我該怎麼做？有沒有JavaScript的庫來做到這一點？

來源

2015-06-21 Sato

嘗試'IMG {最大寬度：100％; vertical-align：middle; }' –

您需要將max-width和max-height css屬性用於img標記。

img { 
    max-width: 100%; 
    max-height: 100%; 
}

這將保持您的圖像與其父容器的縱橫比。

當我們不知道圖像的寬度和高度時，我建議使用下面的css代碼，它會自動對齊父容器中的圖像。

.image-wrapper { 
    display: table-cell; 
    width: 100px; 
    height:150px; 
    vertical-align: middle; 
    border: 1px solid black; 
} 

.image-wrapper img{ 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
    margin: 0 auto; 
}

Working Fiddle

使用background CSS屬性做同樣的：

Working Fiddle

來源

2015-06-21 03:44:43

HTML：

<div class="outerDiv"> 
    <img src="imagename.jpg" class="img"> 
</div>

CSS：

.img{ 
max-width:100% 
}

希望這有助於

來源

2015-06-21 03:48:50

您還需要最大高度：100％的情況下，圖像是高大的，而不是寬。 –

.divclass img { 
 
    max-width: 100%; 
 
}

來源

2015-06-21 03:54:53

如何在固定大小的div中正確顯示大圖像？

回答

相關問題