我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
当前回答
我想分享我的解决方案,其中我有一个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 >
其他回答
为了补充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请求。
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;
}
这里是我的解决方案,以保持16:9纵横比在纵向或横向的div与可选的固定边距。
它是宽度/高度和最大宽度/最大高度属性与vw单位的组合。
在这个示例中,悬停时添加了50px的上下边距。
html { 高度:100%; } 身体{ 保证金:0; 高度:100%; } .container { 显示:flex; justify-content:中心; 对齐项目:中心; 高度:100%; } .fixedRatio { max-width: 100大众; Max-height: calc(9 / 16 * 100vw); 宽度:calc(16 / 9 * 100vh); 身高:100 vh; /*调试*/ 显示:flex; justify-content:中心; 对齐项目:中心; 背景颜色:蓝色; 字体大小:2快速眼动; 字体类型:“天线”; 颜色:白色; 过渡:宽度0.5s进出,高度0.5s进出; } .fixedRatio:{徘徊 宽度:calc(16 / 9 * (100vh - 100px)); 高度:calc(100vh - 100px); } < div class =“容器”> < div class = ' fixedRatio ' > 16:9 < / div > < / div >
在JSFiddle上演示
如果你想在纵向视图或横向视图的视口中放置一个正方形(尽可能大,但没有任何东西粘在外面),在纵向/横向方向上切换使用vw/vh:
@media (orientation:portrait ) {
.square {
width :100vw;
height:100vw;
}
}
@media (orientation:landscape) {
.square {
width :100vh;
height:100vh;
}
}
感谢大家的贡献,我将在这里添加我的解决方案,这主要是通过重复已接受的答案来实现的。我喜欢这种方法的主要原因是没有不必要的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