使用CSS保持div的宽高比

Question

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西。是否有任何CSS3规则允许高度根据宽度改变，同时保持其宽高比？我知道我可以通过JavaScript实现这一点，但我更喜欢只使用CSS。

Answer 1

基于你的解决方案，我已经做了一些技巧：

当您使用它时，您的HTML将是唯一的

<div data-keep-ratio="75%">

    <div>Main content</div>

</div>

以这种方式使用它：CSS：

*[data-keep-ratio] {

    display: block;

    width: 100%;

    position: relative;

}

*[data-keep-ratio] > * {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

}

和js（jQuery）

$('*[data-keep-ratio]').each(function(){ 

    var ratio = $(this).data('keep-ratio');

    $(this).css('padding-bottom', ratio);

});

有了这个，你只需将attr设置data-keep-ratio为高度/宽度即可。