我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
当前回答
感谢大家的贡献,我将在这里添加我的解决方案,这主要是通过重复已接受的答案来实现的。我喜欢这种方法的主要原因是没有不必要的DOM,因为我在填充之前使用:。
@card-standard-line-height: 21px;
@card-standard-title-line-height: 22.5px;
@16to9percentage: 56.25%;
.overflow {
background-color: inherit;
/* stylelint-disable property-no-unknown */
box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
/* stylelint-enable */
color: inherit;
display: box;
display: -webkit-box;
display: -moz-box;
max-width: 100%;
overflow: hidden;
position: relative;
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
}
* {
box-sizing: border-box;
}
body {
padding: 2rem;
}
.card {
color: #fff;
height: auto;
max-width: 100%;
min-width: unset;
position: relative;
h2 {
font: 18px / 22.5px bold;
}
p {
font: 14px / 21px normal;
}
&-16to9 {
.badge {
color: white;
display:flex;
background-color: red;
justify-content: baseline;
padding: 16px 32px 12px 16px;
position: absolute;
right: 0;
top: 16px;
z-index: 2;
span {
font: 14px / 14px bold;
}
}
// look at this https://css-tricks.com/aspect-ratio-boxes/
.card {
&_description {
max-height: @card-standard-line-height * 1;
// Number of allowable lines in layout
-webkit-line-clamp: 1;
}
&_image,
&_info {
bottom: 0;
height: 100%;
max-height: 100%;
min-height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
&_info {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px;
z-index: 2;
}
&_title {
max-height: @card-standard-title-line-height * 2;
// Number of allowable lines in layout
-webkit-line-clamp: 2;
}
}
&:after,
&:before {
content: "";
display: block;
}
&:after {
background: rgba(0, 0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 0) 100%);
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
&:before {
padding-bottom: @16to9percentage;
}
}
}
https://codepen.io/augur/pen/GRNGLZv?editors=0100
其他回答
我们是这样解决的:
.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/
我使用了一个新的解决方案。
.squares{
width: 30vw
height: 30vw
与主纵横比
.aspect-ratio
width: 10vw
height: 10vh
然而,这是相对于整个视口而言的。所以,如果你需要一个div是视口宽度的30%,你可以使用30vw代替,因为你知道宽度,你可以使用calc和vw单位在高度上重用它们。
虽然大多数答案都很酷,但大多数都要求已经正确大小的图像……其他解决方案只适用于宽度,而不关心可用的高度,但有时您也希望将内容适应于特定的高度。
我试图将它们组合在一起,以带来一个完全可移植和可调整大小的解决方案……诀窍是使用自动缩放图像,但使用内联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
我想分享我的解决方案,其中我有一个img-tag填充一定的纵横比。我不能使用背景,因为缺乏对CMS的支持,我不喜欢使用这样的样式标签:<img style="background:url(…)"/ >。此外,宽度为100%,因此不需要像某些解决方案那样设置为固定大小。它将响应伸缩!
.wrapper { 宽度:50%; } .image-container { 位置:相对; 宽度:100%; } {前.image-container:: 内容:“”; 显示:块; } .image-container img { 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; object-fit:封面; } {前.ratio-4-3:: padding-top: 75%; } {前.ratio-3-1:: 填充顶:calc(100% / 3); } {前.ratio-2-1:: padding-top: 50%; } <div class="wrapper"> <!——让事情变得小一点——> < p > 一个4:3宽高比的例子,由一个1:1比例的图像填充。 < / p > <div class="image-container ratio-4-3"> <!——让我们用4:3的长宽比——> <img src="https://placekitten.com/1000/1000/" alt="小猫!"/> < / div > < p > 只需在它周围放置其他块元素;它会工作得很好。 < / p > < / div >
这是对公认答案的改进:
使用伪元素而不是包装器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>