我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
当前回答
这是对公认答案的改进:
使用伪元素而不是包装器div 长宽比基于盒子的宽度,而不是它的父元素 当内容变高时,盒子会垂直拉伸
.box { margin-top: 1 em; margin-bottom: 1 em; background - color: # CCC; } {前.fixed-ar:: 内容:“”; 浮:左; 宽度:1 px; margin-left: 1 px; } {后.fixed-ar:: 内容:“”; 显示:表; 明确:; } {前.fixed-ar-16-9:: padding-top: 56.25%; } {前.fixed-ar-3-2:: padding-top: 66.66%; } {前.fixed-ar-4-3:: padding-top: 75%; } {前.fixed-ar-1-1:: padding-top: 100%; } .width-50 { 显示:inline-block; 宽度:50%; } .width-20 { 显示:inline-block; 宽度:20%; } <div class="box - fixed-ar- ar-16-9">16:9 full width</div> <人力资源> <div class="box - fixed-ar- ar-16-9 width-50">16:9</div> <人力资源> <div class="box - fixed-ar- ar-16-9 width-20">16:9</div> <div class="box - fixed-ar-3-2 width-20">3:2</div> <div class="box - fixed-ar-4-3 width-20">4:3</div> <div class="box - fixed-ar-1-1 width-20">1:1</div> <人力资源> <div class="box - fixed-ar- ar-16-9 width-20">16:9</div> <div class="box - fixed-ar- ar-16-9 width-50">16:9</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 */
}
当在%中指定填充时,它是基于宽度而不是高度计算的。 .. 所以基本上,不管你的宽是多少,高总是以此为基础计算出来的。这样就能保持比例不变。
我使用了一个新的解决方案。
.squares{
width: 30vw
height: 30vw
与主纵横比
.aspect-ratio
width: 10vw
height: 10vh
然而,这是相对于整个视口而言的。所以,如果你需要一个div是视口宽度的30%,你可以使用30vw代替,因为你知道宽度,你可以使用calc和vw单位在高度上重用它们。
我们是这样解决的:
.square {
width: 100%;
max-height: 100%;
aspect-ratio: 1;
background: red;
position: relative;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
参见https://jsfiddle.net/r1jL3oqa/1/
我遇到过这个问题很多次,所以我为它做了一个JS解决方案。这基本上是根据你指定的元素宽度比例来调整domElement的高度。你可以这样使用它:
<格比=“4x3”></div>
请注意,因为它正在设置元素的高度,元素应该是一个display:block或display:inline-block。
https://github.com/JeffreyArts/html-ratio-component
只需创建一个包装器<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;
}
这里有一个演示和另一个更深入的演示