我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
当前回答
虽然大多数答案都很酷,但大多数都要求已经正确大小的图像……其他解决方案只适用于宽度,而不关心可用的高度,但有时您也希望将内容适应于特定的高度。
我试图将它们组合在一起,以带来一个完全可移植和可调整大小的解决方案……诀窍是使用自动缩放图像,但使用内联svg元素,而不是使用预渲染的图像或任何形式的第二个HTTP请求…
div.holder { 背景颜色:红色; 显示:inline-block; 身高:100 px; 宽度:400 px; } svg img { 背景颜色:蓝色; 显示:块; 高度:汽车; 宽度:汽车; max-width: 100%; max-height: 100%; } .content_sizer { 位置:相对; 显示:inline-block; 高度:100%; } .content { 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; background - color: rgba(155255年,0,0.5); } < div class = "架" > < div class = " content_sizer”> <svg width=10000 height=5000 /> < div class = "内容" > < / div > < / div > < / div >
请注意,我在SVG的width和height属性中使用了较大的值,因为它需要大于预期的最大大小,因为它只能缩小。这个例子使div的比例为10:5
其他回答
2022解决方案-使用CSS的纵横比属性
<div class='demo'></div>
.demo {
background: black;
width: 500px;
aspect-ratio: 4/3;
}
更新:现在所有常绿浏览器都支持这个解决方案
艾略特启发我想出了这个解决方案——谢谢:
png是一个完全透明的png文件,大小和你喜欢的纵横比一样,在我的例子中是30x10像素。
HTML
<div class="eyecatcher">
<img src="/img/aspectratio.png"/>
</div>
CSS3
.eyecatcher img {
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(../img/autoresized-picture.jpg);
}
请注意:background-size是css3特性,可能不适用于你的目标浏览器。你可以检查互操作性(f.e.在caniuse.com)。
正如w3schools.com网站上所述,并在这个公认的答案中有所重申,填充值为百分比(重点是我的):
以包含元素宽度的百分比指定填充
因此,一个保持16:9纵横比的响应式DIV的正确示例如下:
CSS
.parent {
position: relative;
width: 100%;
}
.child {
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
.child > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
HTML
<div class="parent">
<div class="child">
<div>Aspect is kept when resizing</div>
</div>
</div>
在JSFiddle上演示
Chrome 88的新特性是CSS的宽宽比属性,其他浏览器也很快会加入。
纵横比CSS属性为盒子设置了一个优先的纵横比,它将用于自动大小的计算和一些其他的布局功能。
CSS技巧文章
更多的信息
div { 背景:rebeccapurple; 身高:100 px; 保证金:1 em汽车; } .square { 纵横比:1 / 1; } < div class = "广场”> < / div >
新的纵横比标签会很棒,但它打乱了我的divs的定位。 填充包装器div的传统解决方案是有效的,但只能根据父类或视口的宽度调整大小,当高度是限制因素时,这就产生了问题。
我发现min()函数非常有用,并调整了传统的方法,如下所示:
身体{ background-image: linear-gradient(到右上,#FFE6B5, #B3CEBF); 填充:0; 保证金:0自动; overflow-y:隐藏;/*这是为了避免在视口高度小于纵横比要求*/时滚动 } .wrapper { 位置:相对; 宽度:100大众; max-height: 100 vh; } .sixteen-by-nine。宽高比{ 衬底:56.25% /* 9:16比*/ } .content { 位置:绝对的; 上图:0;底部:0;左:0;右:0; 背景颜色:绿色 } .centered { 位置:绝对的; 左:50%; 上图:50%; 转换:翻译(-50%,-50%); 高度:100%; 宽度:min(177.8vh, 100%);/*这总是在视口中保持16:9的比例*/ 字体大小:最小(1.7 3 vh,大众);/*如果你也对缩放字体大小*/感兴趣 背景颜色:蓝色 } 身体< > < div class = "包装" > <div class=" 16x9纵横比"></div> <div class="content" > < div class = "集中" > <!——东西在这里——> < / div > < / div > < / div > 身体< / >