如何用css实现元素固定宽高比？

如何⽤css实现元素固自我介绍简单 定宽⾼⽐？

如何⽤css实现元素固定宽⾼⽐？

⼀、img、video 可替换元素的固公司战略 定宽⾼⽐实现原理

指定img、video的宽度或者⾼度，另⼀边设置auto⾃动计算。⽐较简单。

html：

css：

.img-wrapper {

width: 50%;

}

img {

width: 100%;

height: auto;

}

⼆、普通元素固美术作品绘画 定宽⾼⽐实现原理：

利⽤或者的百分⽐值，实现容器长宽⽐。在CSS中或的百分⽐值是根据容器的

padding-toppadd刘氏冠 ing-bottompadding-toppadding-bottom

width来计算的。如此⼀来就很好的实现了容器的长宽⽐。采⽤这种⽅法，需要把容器的height设置为0。⽽容器内容的所有元素都需

要采⽤，不然⼦元素岳云鹏经历 内容都将被paddin荀子修身 g挤出容器（造成内容溢出）。

position:absolute

⽐如我们容器的长宽⽐是16:9，那么根据计算：100% * 9 / 16 可以得到 56.25%。如果你希望的是4:3，那么对应的就是100% *

3 / 4。也可以使⽤calc函数来实现⾃动计算：。

calc(100%*9/16)

不过这种⽅式不灵活，只能够⾼度随着宽度变。CSS ⼯作组现在正在引⼊⼀种新的⽅案，可以很⽅便地指定宽⾼⽐，不过

aspect-ratio

暂时还没有浏览器实现。相信不久之后就会有浏览器逐渐实现了。

html：

CSS：

* {

margin: 0;

padding: 0;

/* 清除默认样式 */

}

.box {

width: 50%;

/* 这⾥的宽度，根据你想要实现的容器相⽐浏览器可视窗⼝的宽度⽐来 */

}

.scale {

width: 100%;

padding-bottom: 56.25%;

height: 0;

position: relative;

}

.item {

width: 100%;

height: 100%;

background-color: pink;

position: absolute;

}

三、如果想要实现固定⽐例的img，但是img本⾝尺⼨并不是我们想要的⽐例，那么可以通过设置属性来填充盒⼦。

background

但是这种⽅式下，图⽚想要不变形，需要设置cover属性哦，但是这样同时有个缺陷，就是，图⽚不能显⽰完整。background: url()

no-repeat center center/covegb是啥意思 r;

html：

css：

* {

margin: 0;

padding: 0;

/* 清除默认样式 */

}

.box {

widt幼儿园小班评语 h: 50%;

/* 这⾥的宽度，根据你想要实现的容器相⽐浏览器可视窗⼝砗 的宽度⽐来 */

}

.img-wrapper {

width: 100%;

background: url() no-repeat center center/cover;

padding-bottom: 56.25%;

height: 0;

}

img {

width: 100%;

height: auto;

}