如何保持圖像寬高比在寬度div內？

我很抱歉再次提出這個問題，但我的搜索沒有透露任何我已經能夠實現的功能。我有一個div內部的圖像與以下類型：如何保持圖像寬高比在寬度div內？

<div class="thumb grid_6"> 
    <img src="img/test2.jpg" alt="flavin" /> 
</div> 

.grid_6 { width: 50%; } 

.thumb img { 
display: block; 
max-width:100%; 
max-height: 100px; 
width:100%;

我想像高在100像素被鎖定，剩餘的50％的寬度。理想情況下，圖像將保持其縱橫比，並且裁剪到所需大小以適應縮略圖。我寧願不進入js，除非有更簡單的方法來使用js。我對編碼經驗不足表示歉意。

任何幫助將不勝感激。

來源

2014-03-04 user3379832

圖像如何應該停留在100像素的高度，寬度的50％*和*保持其縱橫比？ – George

@oGeez他在問題中說明了這一點。圖像應該裁剪。 – CeejeeB

啊，錯過了。謝謝@CeejeeB – George

這應該是你在找什麼：

FIDDLE

CSS：

.grid_6 { 
    width: 50%; 
    height:100px; 
    overflow:hidden; 
} 
.thumb img { 
    display: block; 
    width:100%; 
    height:auto; 
}

來源

2014-03-04 16:24:13

啊！太棒了！非常感謝你。從來沒有想過在grid_6類中定義寬度。謝謝您的回答。你也知道我會如何去集中div中的圖像嗎？ – user3379832

@ user3379832很高興我能幫上忙。如果您需要垂直對齊圖片，那麼CSS非常困難，我不知道解決方案，您可以提出一個新的問題。 –

這是你想要的嗎？

.grid_6 {overflow: hidden; } 
.thumb img { 
    height: 100px; 
    width: auto; 
}

來源

2014-03-04 16:23:14

在這種情況下，圖像縮小到任何寬度，使高寬比保持在100px。我希望圖像覆蓋容器的全部寬度，這是容器的50％。 – user3379832

如何保持圖像寬高比在寬度div內？

回答

相關問題