[英]CSS how to Scale and Aspect Ratio width based on height?
assume the height is 80% of parent div, and I want the width is twice the height.假设高度是父 div 的 80%,我希望宽度是高度的两倍。 so can I do this:所以我可以这样做:
.scal{ height:'80%', width:2 x height } .scal{ 高度:'80%',宽度:2 x 高度 }
can it be possible or I have another way to achieve this?有可能还是我有另一种方法来实现这一目标?
I think what you're asking can be achieved in CSS provided you know the height of the parent element如果您知道父元素的高度,我认为您的要求可以在 CSS 中实现
width: calc(whateverElementsHeightInUnits * 2)
However I think the best way to do this is with jQuery as below但是我认为最好的方法是使用 jQuery 如下
$(window).resize(function(){
$('.scal').css({ width: $(whateverElement).innerHeight() * 2 });
});
You can do something approaching this using a combination of CSS custom properties (variables) and the calc
function:您可以使用CSS 自定义属性(变量)和calc
function 的组合来做一些接近此的事情:
:root { --rect-height: 100px; }.rect { background: red; display: block; height: var(--rect-height); width: calc(var(--rect-height) * 2); }
<div class="rect"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.