我可以使用CSS按比例调整div的高度吗？

我可以在CSS中设置任何variables，就像我希望我的div高度始终是宽度的一半我div的尺寸与div的屏幕大小宽度百分比

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

CSS：

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

这30％的宽度与屏幕分辨率成比例

Answer 1

你可以在父项的填充的帮助下做到这一点，因为相对填充（甚至是高度）是基于父元素的宽度。

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/

Answer 2

另一个很好的方法是使用具有设定高宽比的透明图像。 然后将图像的宽度设置为100％，将高度设置为自动。 不幸的是，这将压低容器的原始内容。 所以你需要将原始内容包装在另一个div中，并将其绝对定位到父div的顶部。

 <div class="parent"> <img class="aspect-ratio" src="images/aspect-ratio.png" /> <div class="content">Content</div> </div> 

CSS

 .parent { position: relative; } .aspect-ratio { width: 100%; height: auto; } .content { position: absolute; width: 100%; top: 0; left: 0; } 

Answer 3

如果你想垂直大小成正比在一个封闭div的像素设置的宽度，我相信你需要一个额外的元素，如下所示：

 #html <div class="ptest"> <div class="ptest-wrap"> <div class="ptest-inner"> Put content here </div> </div> </div> #css .ptest { width: 200px; position: relative; } .ptest-wrap { padding-top: 60%; } .ptest-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #333; } 

这是2分钟的解决scheme不起作用。 请注意，60％垂直填充与窗口宽度成正比，而不是div.ptest宽度：

http://jsfiddle.net/d85FM/

下面是上面的代码示例，它可以工作：

http://jsfiddle.net/mmq29/

Answer 4

对于那些寻求可扩展解决scheme的人来说：我在SASS编写了一个小型辅助工具，为不同的断点生成响应比例矩形。 看看SASS比例

希望它可以帮助任何人！

Answer 5

除了我不喜欢使用尽可能多的类名之外，这个答案与其他类似。 但这只是个人喜好。 你可以争辩说，在每个div上使用类名是更加透明的，因为前面说明了嵌套div的用途。

 <div id="MyDiv" class="proportional"> <div> <div> <p>Content</p> </div> </div> </div> 

这是通用的CSS：

 .proportional { position:relative; } .proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; } 

然后定位第一个内部div来设置宽度和高度（padding-top）：

 #MyDiv > div { width:200px; padding-top:50%; }