我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
当前回答
只需创建一个包装器<div>,并为padding-bottom设置一个百分比值,如下所示:
.demoWrapper { 填充:10 px; 背景:白色; box-sizing: border-box; 调整:水平; 边框:1px虚线; 溢出:汽车; max-width: 100%; 高度:calc(100vh - 16px); } div { 宽度:100%; padding-bottom: 75%; 背景:黄金;/** <——用于演示**/ } < div class = " demoWrapper”> < div > < / div > < / div >
它将生成一个<div>,其高度等于其容器宽度的75%(4:3长宽比)。
这依赖于以下事实:
百分比是根据生成的盒子的包含块的宽度计算的[…](来源:w3.org,重点是我的)
其他纵横比和100%宽度的填充底部值:
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
在div中放置内容:
为了保持div的纵横比并防止它的内容被拉伸,你需要添加一个绝对定位的子元素,并将其拉伸到包装器的边缘:
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
这里有一个演示和另一个更深入的演示
其他回答
有几种方法可以在元素(如div)上指定固定的纵横比,下面是其中的两种:
1. 纵横比CSS属性
div { 纵横比:1 / 1; 宽度:50%; 背景:蓝绿色; } <div>纵横比:1 / 1
这是最简单灵活的解决方案。它直接为元素指定固定的宽高比(或高宽比)。这意味着您还可以根据元素的高度指定纵横比。 它不依赖于父宽度(像填充技术)或视口大小(像下面的vw单元技术),它依赖于元素自身的宽度或高度。这就是为什么与其他变通方法相比,它是如此强大。
这是一个现代化的房产(2021年)。所有现代浏览器都支持它,请参阅caniuse以获得精确的浏览器支持。
下面是一些不同纵横比的例子:
.ar-1-1{纵横比:1 / 1;} .ar-3-2{纵横比:3 / 2;} .ar-4-3{纵横比:4 / 3;} .ar-16-9{纵横比:16 / 9;} .ar-2-3{纵横比:2 / 3;} .ar-3-4{纵横比:3 / 4;} .ar-9-16{纵横比:9 / 16;} /**对于演示:**/ 身体{ 显示:flex; flex-wrap:包装; 对齐项目:flex-start; } div { 背景:蓝绿色; 宽度:23%; 利润率:1%; 填充:20 px 0; box-sizing: border-box; 颜色:# fff; text-align:中心; } <div class="ar-1-1">纵横比:1 / 1 <div class="ar-3-2">纵横比:3 / 2 <div class="ar-4-3">纵横比:4 / 3 <div class="ar-16-9">纵横比:16 / 9 <div class="ar-2-3">纵横比:2 / 3 <div class="ar-3-4">纵横比:3 / 4 <div class="ar-9-16">纵横比:9 / 16
2. 使用大众单位:
你可以用vw单位来表示元素的宽度和高度。这允许根据视口宽度保留元素的纵横比。
Vw:视口宽度的百分之一。(MDN)
或者,你也可以使用vh作为视口高度,或者甚至使用vmin/vmax来使用视口尺寸中的较大/较小(此处讨论)。
例如:1:1的纵横比 div { 宽度:20大众; 高度:20大众; 背景:黄金; } < div > < / div >
对于其他纵横比,您可以使用下表根据元素的宽度计算高度的值:
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
示例:正方形div的4x4网格
身体{ 显示:flex; flex-wrap:包装; justify-content:之间的空间; } div { 宽度:23大众; 高度:23大众; 利润率:0.5大众汽车; 背景:黄金; } < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < div > < / div >
这里是一个摆弄这个演示,这里是一个解决方案,使一个响应网格的正方形与垂直和水平居中的内容。
浏览器对vh/vw单元的支持是IE9+,参见canIuse了解更多信息
只是一个想法或黑客。
div { 背景颜色:蓝色; 宽度:10%; 过渡:底色0.5s,宽度0.5s; 字体大小:0; } div:{徘徊 宽度:20%; 背景颜色:红色; } img { 宽度:100%; 高度:汽车; 可见性:隐藏; } < div > <!—使用具有目标纵横比的图像。样本是一个正方形——> <img src="http://i.imgur.com/9OPnZNk.png" /> < / div >
假设你有2个div,外部的div是一个容器,内部的div可以是你需要保持其比例的任何元素(img或YouTube iframe或其他)
HTML看起来是这样的:
<div class='container'>
<div class='element'>
</div><!-- end of element -->
<div><!-- end of container -->
比如说你需要保持元素的比例 比例=> 4比1或2比1…
CSS是这样的
.container{
position: relative;
height: 0
padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/
}
.element{
width : 100%;
height: 100%;
position: absolute;
top : 0 ;
bottom : 0 ;
background : red; /* just for illustration */
}
当在%中指定填充时,它是基于宽度而不是高度计算的。 .. 所以基本上,不管你的宽是多少,高总是以此为基础计算出来的。这样就能保持比例不变。
为了补充Web_Designer的答案,<div>的高度(完全由底部填充组成)将是其包含元素宽度的75%。这里有一个很好的总结:http://mattsnider.com/css-using-percent-for-margin-and-padding/。我不知道为什么会这样,但事实就是这样。
如果你想让你的div的宽度不是100%,你需要另一个包装div来设置宽度:
div.ar-outer{
width: 60%; /* container; whatever width you want */
margin: 0 auto; /* centered if you like */
}
div.ar {
width:100%; /* 100% of width of container */
padding-bottom: 75%; /* 75% of width of container */
position:relative;
}
div.ar-inner {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
我最近使用了类似于Elliot的图像技巧,允许我使用CSS媒体查询来根据设备分辨率提供不同的logo文件,但仍然按照<img>自然会做的比例缩放(我将logo作为背景图像设置为具有正确纵横比的透明。png)。但是Web_Designer的解决方案将为我节省一个http请求。
您可以使用svg。使容器/包装器的位置相对,首先将svg放置为静态定位,然后放置绝对定位的内容(顶部:0;左:0;右:0;底部:0,)
比例为16:9的例子:
Image.svg:(可以内联到src中)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>
CSS:
.container {
position: relative;
}
.content {
position: absolute;
top:0; left:0; right:0; bottom:0;
}
HTML:
<div class="container">
<img style="width: 100%" src="image.svg" />
<div class="content"></div>
</div>
注意,内联svg似乎不起作用,但你可以urlencode svg并将其嵌入到img src属性中,就像这样:
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />