使用css定義基於寬度的高度

我需要將元素的高度設置爲其寬度的2/3。我知道我可以用類似於$(this).height($(this).width()/3*2)使用css定義基於寬度的高度

這樣的東西使用JS來做到這一點，我可以使用不帶預處理器的直接CSS來做同樣的事情嗎？

來源

2017-08-25 Caio Favero

您可以將元素設置爲'高度：0;填充底：66.67％'，但隨後你必須絕對位置的任何兒童的內容。這是否實際取決於元素內部的內容。 – Blazemonger

@Blazemonger它實際上按照我需要的方式工作。謝謝 –

添加爲答案 – Blazemonger

-1

您可以將元素設置爲height: 0;padding-bottom: 66.67%，但您必須絕對定位任何子內容。這是否實際取決於元素內部的內容。

來源

2017-08-25 13:59:59 Blazemonger

沒錯沒有爲此

流行的技巧，但現在我們有CSS變量/自定義屬性，你可以使用。不完全支持雖然

.p{ 
 
    width: 60px; 
 
} 
 

 
.c { 
 
    background-color: cyan; 
 
    width: 100%; 
 
    padding-top: 150%; 
 
} 
 

 
/* advanced css custom properties */ 
 
.a { 
 
    --width: 60px; 
 
    width: var(--width); 
 
    height: calc(var(--width)*1.5); 
 
    background-color: rebeccapurple; 
 
}


 
<!-- hack using padding --> 
 
<div class="p"> 
 
    <div class="c"> 
 
     
 
    </div> 
 
    </div> 
 
    <br> 
 
    
 
    <!-- advanced css using custom properties/ css variables --> 
 
    <div class="a"></div>

來源

2017-08-25 14:10:54

使用css定義基於寬度的高度

回答

相關問題