保持宽高比

保持宽高比

1. 定义一个名为 .box 的 CSS 类选择器，用于选择需要应用样式的容器元素。
2. 使用 margin 属性将容器元素的上下外边距设置为 0，左右外边距设置为 auto，实现水平居中。
3. 使用 width 属性将容器元素的宽度设置为 90%，使其相对于父元素占据 90% 的宽度。
4. 使用 height 属性将容器元素的高度设置为 500px，使其固定高度为 500 像素。
5. 使用 background-color 属性将容器元素的背景颜色设置为红色。
6. 使用 aspect-ratio 属性将容器元素的宽高比设置为 16/9，使其宽度和高度的比例为 16:9。
7. 使用 overflow 属性将容器元素的溢出内容进行隐藏，避免出现滚动条。

.box {
  margin: 0 auto;
  width: 90%;
  height: 500px;
  background-color: red;
  aspect-ratio: 16/9;
  overflow: hidden;
}

这个样式可以用于实现一个具有固定宽高比的容器，例如视频播放器、图片展示等场景。由于使用了 aspect-ratio 属性，容器的宽高比是固定的，不会因为容器的尺寸变化而发生变化。这个属性在响应式设计中也非常有用，可以根据屏幕尺寸的变化自适应调整容器的大小和宽高比。