使用CSS保持div的宽高比

Question

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西。

是否有任何CSS3规则允许高度根据宽度改变，同时保持其宽高比？

我知道我可以通过JavaScript实现这一点，但我更喜欢只使用CSS。

Answer 1

基于你的解决方案，我已经做了一些技巧：当您使用它时，您的HTML将是唯一的<div data-keep-ratio="75%">&nbsp; &nbsp; <div>Main content</div></div>以这种方式使用它：CSS：*[data-keep-ratio] {&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; position: relative;}*[data-keep-ratio] > * {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; bottom: 0;}和js（jQuery）$('*[data-keep-ratio]').each(function(){&nbsp;&nbsp; &nbsp; var ratio = $(this).data('keep-ratio');&nbsp; &nbsp; $(this).css('padding-bottom', ratio);});有了这个，你只需将attr设置data-keep-ratio为高度/宽度即可。