我可以使用CSS按比例缩放div的高度到其宽度吗？ [英] Can I scale a div's height proportionally to its width using CSS?

问题描述

我可以在CSS中设置任何变量，如我希望我的div高度总是宽度的一半我的div缩放与屏幕尺寸宽度为div是百分比

 < div class =ss>< / div> 
  

CSS：

  .ss {
 width：30％; 
 height：width的一半; 
} 
  

这30％的宽度与屏幕分辨率相符

解决方案

您可以在父项的填充的帮助下，因为相对填充（甚至高度方面）是基于元素的宽度。 / p>

CSS：

  .imageContainer {
 position：relative ; 
 width：25％; 
 padding-bottom：25％; 
 float：left; 
 height：0; 
} 
 
 img {
 width：100％; 
 height：100％; 
 position：absolute; 
 left：0; 
} 
  

有关详细信息，请参阅有关主题的文章
http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes- using-just-css /

Can I set any variable in CSS like I want my div height to always be half of width my div scales with the screen size width for div is in percent

<div class="ss"></div>

CSS:

.ss {
    width:30%;
    height: half of the width;
}

This 30% width scales with screen resolution

解决方案

You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

For details, see this article on the subject http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/

这篇关于我可以使用CSS按比例缩放div的高度到其宽度吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！