我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
当前回答
我是这样做的:
[data-aspect-ratio] {
display: block;
max-width: 100%;
position: relative;
}
[data-aspect-ratio]:before {
content: '';
display: block;
}
[data-aspect-ratio] > * {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
[data-aspect-ratio="3:1"]:before {
padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
padding-top: 300%;
}
例如:
<div data-aspect-ratio="16:9"><iframe ...></iframe></div>
源
其他回答
我想只是使用rem或em应该解决固定比例的问题,但不会像vw或vh那样难以绑定到屏幕上,或者像%那样痛苦地使用flexbox。好吧,没有一个答案适合我,在我的情况下,这对我来说很重要:
<div class="container">
<div>
</div>
</div>
.container {
height: 100vh;
width: 100vw;
}
.container div {
height: 4em;
width: 3em;
}
或者用rem,但是不管怎样,它们中的任何一个都可以。 Rem使用默认的字体大小值,而em使用最接近的字体大小。
2022解决方案-使用CSS的纵横比属性
<div class='demo'></div>
.demo {
background: black;
width: 500px;
aspect-ratio: 4/3;
}
更新:现在所有常绿浏览器都支持这个解决方案
根据你的解决方案,我做了一些技巧:
当您使用它时,您的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;
}
jQuery和jQuery
$('*[data-keep-ratio]').each(function(){
var ratio = $(this).data('keep-ratio');
$(this).css('padding-bottom', ratio);
});
有了这个,你只需要设置attr data-keep-ratio到高/宽,就这样。
实际上,高投票的答案是一个非常好的解决方案,但有一个新的CSS功能,名字是长宽比。
它可以这样使用:
.someClass {
width: 100%;
aspect-ratio: 4/3;
}
自动确定高度,但请参见兼容性表:
如果浏览器支持对你的项目很重要,不要使用它。使用填充底技术。
2021年更新- CSS纵横比属性
我们最近获得了在CSS中使用长宽比属性的能力。
https://twitter.com/Una/status/1260980901934137345/photo/1
注意:支持还不是最好的…
注意:支持是相当体面的!
https://caniuse.com/#search=aspect-ratio
编辑:长宽比现在可用!
https://web.dev/aspect-ratio/
如果你对如何使用它感兴趣,可以看看下面这个超级简单的例子
.yourClass {
aspect-ratio: 4/3;
}