限制寬度與高度的關係，反之亦然

例如此僞代碼：

max-height: (width * 0.75)px;

將確保元件的高度也不會超過75％的它的寬度，但也可以是更小的。

是這樣的可能，還是我運氣不好？

編輯：請注意，我不看使高度寬度正是 75％，而我期待，以確保它不會超過 75％

來源

2016-01-20 Evert

的[保持與CSS一個div的縱橫比（可能的複製http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a -div-with-css） – NovaLogic

這被稱爲縱橫比fyi – zgood

這個問題似乎不是保留寬高比的問題，但不超過一些縱橫比，這是不同的。 –

CSS不允許基於其他值設置屬性，因此您需要使用其他方法，例如javascript。

這裏是一個jQuery例如：

var $elem = $('#elem'); 
$elem.css('max-height', $elem.width() * 0.75);

來源

2016-01-20 19:39:14

這是一個有效的解決方案，但這樣做會更糟糕。這意味着我必須傾聽調整大小事件以確保它保持準確，並且每當DOM迴流（這是一個相當動態的應用程序）。對於不關心的情況，仍然是一個很好的答案。 – Evert

您不能設置比例，但總有padding-bottom！重讀

後9比使用padding-bottom: 56.25%

一個編輯如果我建議使用一個：

div { width: 100%; padding-bottom: 75%; }

該代碼將設置div爲4：3的比例

對於16 div裏面的div？

<div class="a"> <div class="b"> </div> </div> <style> .a{ width:100%; padding-bottom: 75%; background-color: red; position: relative; } .b{ width: 100%; max-height: 100%; background-color: white; position: absolute; overflow: hidden; } </style>

把裏面div.b的內容和它永遠不會超過75％

來源

2016-01-20 19:41:25

@AlvaroMontoro，這是正確的。我實際上打算限制兩個維度的寬高比。最終，我希望我的div可以採用4：3或16：9，但不要讓縱橫比比這兩個更遠。那些是我最終的相對邊框。 – Evert

@Evert我以16：9的比例更新了我的答案 –

@Nordenheim我很欣賞，您還沒有閱讀其他評論或我原來的帖子。我期望控制'max-height'，如果我只是在尋找'height'，你的解決方案就是正確的。 – Evert

退房這個問題：Height equal to dynamic width (CSS fluid layout)

具體@ Kristijan的答案。您將需要調整底部填充。

.some_element { 
    position: relative; 
    width: 20%; 
    height: 0; 
    padding-bottom: 20%; 
}

來源

2016-01-20 19:42:00 EricBellDesigns

這不回答這個問題。我正在使用它作爲「最大高度」而不是「高度」。如果它是「高度」，你會是對的。 – Evert

如果元件拍攝整個視口寬度。你可以這樣做：

.class { 
    max-height: 75vw; 
}

來源

2016-01-20 19:46:04 Stickers

我想總是指整個視口，而不是父元素？聰明，但我仍然可以使用它，並可能解決我的問題，如果沒有更好的解決方案。 – Evert

你說得對。或者，如果元素也使用了vw，或者相對於視口爲％，則必須執行calc（）或手動設置最大高度。 – Stickers

限制寬度與高度的關係，反之亦然

回答

相關問題