css设置宽高比：aspect-ratio

aspect-ratio主要用途：

1.为图片、视频和嵌入创建内在的占位容器，以防止项目加载时重新布局而占用空间

2.创建响应式 iframes

语法(aspect-ratio)

div {
    background-color: rgb(176, 238, 207);
    display: inline-block;
    aspect-ratio: 2/1;
}

语法(min-aspect-ratio和max-aspect-ratio)

/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff;  /* cyan */
  }
}

/* 明确的宽高比，放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

---

宽高比相关知识

Object-fit

它能够描述一个 block 中的对象（如图像）应该如何填充该 block，可在定义宽高比中使用。

initial 和 fill 的属性值会重新调整图像以填充空间， 会导致图像被挤压和模糊。

object-fit: cover 使用图像的最小尺寸来填充空间。在大多数情况下都能确保在处理不同尺寸的图片时有一个很好的统一界面，但是，这样会丢失信息（图片的最长边缘被裁剪）

object-fit: contain 确保整个图像总是可见的，它采用最大边界的尺寸，并调整图像的大小，以保持其固有的纵横比，同时适应空间。

object-fit: none 情况下，显示的是图像在其中心（默认对象位置）以自然尺寸裁剪。

padding-top 维持长宽比

需要一个父容器和一个绝对放置的子容器。然后计算出长宽比的百分比来设置为 padding-top。

<div class="container">
  <img class="media" src="..." alt="...">
</div>

// padding-top会设置高度为宽度的50%，即height：width = 1:2
.container {
  border:1px solid red;
  position: relative;
  width: 100%;
  padding-top: 50%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}