html - CSS如何根据高度缩放和纵横比宽度？

Question

假设高度是父 div 的 80%，我希望宽度是高度的两倍。我可以这样做吗：

.scal{ 高度：'80%'，宽度：2 x 高度 }

有可能还是我有另一种方法来实现这一目标？

标签： htmlcss

Answer 1

我认为只要您知道父元素的高度，您的要求就可以在 CSS 中实现

CSS

width: calc(whateverElementsHeightInUnits * 2)

但是我认为最好的方法是使用 jQuery，如下所示

jQuery

$(window).resize(function(){
   $('.scal').css({ width: $(whateverElement).innerHeight() * 2 });
});