CSS/LESS：如何設置div的高度等於其父項寬度的112％？

我有兩個div，div.outer和div.inner：CSS/LESS：如何設置div的高度等於其父項寬度的112％？

<div class='outer'><div class='inner'>...content...</div</div>

div.outer可以調整大小，寬度和高度獨立。（不是由用戶自己。）

在這個div裏面是div.inner，其寬度爲其父母div.outer的90％。該div必須具有height/width = 1.24的寬高比。所以高度必須是寬度的1.24倍。

換句話說，你如何設置一個div的高度等於它父母的寬度的112％？（1.2 * 90 ≈ 112）我正在尋找一個解決方案在較少或標準的CSS。（如果需要，只有JavaScript/jQuery）。

在這裏，在僞CSS：

.outer{ 
    width: resizable; 
    height: resizable; 
} 

.inner{ 
    width: 90%; 
    height: 1.12 * width_of(.outer); 
}

在此先感謝。

來源

2016-08-28 Kevin

的[？我可以設置基於一個基於百分比的寬度div的高度（可能的複製http://stackoverflow.com/questions/10 062811/can-i-set-the-height-of-a-div-based-a-percentage-based-width） –

@PraveenPuglia這確實是一個類似的問題。不同的是，我還在使用Less尋找解決方案。 – Kevin

純粹的CSS代碼對於LESS來說是完美的。根據那裏的答案，我沒有看到一個理由，爲什麼你不能在你的LESS文件中使用它。 –

有保持div的縱橫比一招，我學會在這個西班牙語博客：https://escss.blogspot.com/2013/08/aspect-ratios-css.html

你必須添加額外div但也許是你或你的第一步，以獲得解決方案有用：

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
.outer { 
 
    width: 300px; 
 
    border: solid 1px green; 
 
} 
 

 
.inner { 
 
    border: solid 1px red; 
 
    width: 90%; 
 
    position: relative; 
 
} 
 

 
.inner:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 124%; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="content"> 
 
     ... content ... 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-08-29 12:38:49 blonfu

CSS/LESS：如何設置div的高度等於其父項寬度的112％？

回答

相關問題