设置宽高比

CSS

对于可替换元素

• 可替换元素(如<img>、<video>)和其他元素不同，它们本身有像素宽度和高度的概念。所以如果想实现这一类元素固定宽高比，就比较简单。
• 我们可以指定其宽度或者高度值，另一边自动计算就可以了。

实例

如下，我们固定图片元素的宽度，高度自适应：

<div class="img-wrapper">
  <img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>

.img-wrapper {
  width: 50vw;
  margin: 100px auto;
  padding: 10px;
  border: 5px solid lightsalmon;
  font-size: 0;
}

对于普通元素

使用边距来撑开盒子

• 这种方式只能高度随着宽度动，并不能实现宽度随着高度动。
  • 所以使用的时候，只指定宽度，而不指定高度
• base::

  Transclude of 外边距#^y4gjzm

实例

通过借助padding-bottom我们就可以实现一个宽高比例固定的元素，以div为例。

<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>

.wrapper {
  width: 40vw;
}
.intrinsic-aspect-ratio-container {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}

效果如下：

如上代码，我们将div元素的高度设为了0，通过padding-bottom来撑开盒子的高度，实现了4/3的固定宽高比。 这样是实现了固定宽高比，但其只是一个徒有其表的空盒子，里面没有内容。如果想在里面放入内容，我们还需要将div`内部的内容使用绝对定位来充满固定尺寸的容器元素。 如下：

.intrinsic-aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

通过这种方式我们就可以实现一个可以填充内容的固定尺寸的容器了。

使用aspect-ratio

child::

aspect-ratio

实例

/* 高度随动 */
.box1 {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
/* 宽度随动 */
.box2 {
height: 100%;
width: auto;
aspect-ratio: 16/9;
}

指向原始笔记的链接