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％？

回答

相关问题