CSS：保持元素對於給定高度的高寬比

對於這種情況，以上對可能重複的鏈接不是解決方案，因爲高度對於多個斷點是固定值。CSS：保持元素對於給定高度的高寬比

我有一些DIV與display:inline-block，所以他們漂浮在一起很好。這些DIV都具有相同的高度，例如height:300px。後來，我會用Ajax在每個DIV中加載一個圖像，並且我希望DIV保持圖像的高寬比，所以當圖像實際加載時，它們不會四處擺動。

所以當DIVs在瀏覽器中顯示時，圖像還沒有出現，所以用height:auto;固定圖像的高度將不起作用。

樣品的編號：

<div class="wrapper"> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <!-- More items here --> 
</div>

CSS：

.item { 
    display:inline-block; 
    vertical-align:top; 
    height: 300px; 
    width: /* depending on the image ratio */ 
}

現在我知道如何保持的元件的縱橫比爲給定寬度（參見here或here ）。但是由於我的DIV應該都具有相同的高度，我怎樣才能保持寬高比並改變寬度？

一個（不是很好）解決方案是插入一個空白圖像並將該圖像的大小調整爲正確的尺寸。

問題是：調整窗口大小時，所有DIV的高度都會改變，所以只計算寬度是不夠的。我可以用Javascript重新計算寬度，但我更喜歡純CSS版本（如果可能）。

所以，這裏是我的問題：我怎樣才能保持一個元素的高寬比爲一個給定的高度只有CSS？

感謝

來源

2014-09-19 uruk

[保持div高寬比]（http：// stackoverflow。com/questions/23789143 /維持長寬比 - 根據高度） – 2014-09-19 06:40:53

感謝您的鏈接，但在我的示例中，DIV具有固定的高度。 – uruk 2014-09-19 06:49:34

您有寬高比但不是實際的圖像尺寸。我認爲你可以使用calc函數。 瀏覽器支持是一個問題，但：

/* Note: using 30px height for demonstration */ 
 
.item { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 30px; 
 
    background: #FC0; 
 
} 
 
.ratio-3-2 .item { 
 
    /* 3:2 = 1.5 */ 
 
    width: calc(30px * 1.5); 
 
} 
 
.ratio-4-3 .item { 
 
    /* 4:3 = 1.3333 */ 
 
    width: calc(30px * 1.3333); 
 
}

<div class="wrapper ratio-3-2"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 
<div class="wrapper ratio-4-3"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

在上面的演示中，第一組的div將是45像素寬，第二組將是40像素寬。

來源

2014-09-19 11:01:07

這是最接近的解決方案，謝謝。由於每個項目的比例不同，因此我將通過在domready事件中使用Javascript來更改寬度。 – uruk 2014-09-19 11:08:04

當你生成div時你有什麼信息？如果div是通過（例如）PHP生成的，並且你有寬度和高度，那麼你可以內聯樣式。 – 2014-09-19 11:15:23

確實如此，但高度在樣式表中，有幾個斷點 – uruk 2014-09-19 11:32:38

我會根據我使用模板設置DIV的寬度，所以這將是有求必應，加入到我的代碼：

img.item { 
width:auto; height:300px;width: auto\9; // for IE 
}

這將確保你可以控制DIV，而圖像很好地適合於

注意你可能想要將其更改爲max-height：300px;對於響應式網站

來源

2014-09-19 07:13:11 PalDev

你是對的，但圖像尚未加載，只是包裝DIV。在編寫DIV時，我知道圖像比率 – uruk 2014-09-19 10:30:11

但是當加載時，它會自動設置 – PalDev 2014-09-19 11:02:19

是的，但這會導致屏幕上所有項目的擺動。這是我想繞過的。 – uruk 2014-09-19 11:09:10

CSS：保持元素對於給定高度的高寬比

回答

相關問題