aspect-ratio
CSSaspect-ratio
属性可以明确元素的高宽比例,一定是一个高频使用的CSS属性。
例如:
.box {
aspect-ratio: 10 / 1;
background: deepskyblue;
}
.img-size {
aspect-ratio: 1 / 1;
}
不过稍老的浏览器版本不支持这个属性,详见:https://caniuse.com/?search=aspect-ratio
传统方式
利用padding-top
加css
变量实现。
<div class="media media-diy" style="--bili:75;">
<img class="media-content" src="url" style="width:100%;height:100%">
</div>
其中的变量75
实际是高和宽的比值是75%
对应的就是,宽高比为4
比3
,这里使用变量实际是为了更灵活的使用,如果这是固定几种比例,可以完全写死几个固定比值的class
。
.media {
position: relative;
display: block;
padding: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
overflow: hidden;
}
.media-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 0;
margin: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-color: rgba(120, 120, 120, 0.1);
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.media:after {
content: '';
display: block;
padding-top: 100%;
background-repeat: no-repeat;
background-position: 50%;
}
.media-diy:after {
padding-top: calc(var(--bili) * 1%);
}