图片保持宽高比例

为了确保图片在宽高比例为 16:9 的容器内显示，可以通过设置图片的父容器的宽高比来实现。这可以通过 CSS 的 padding-top 技术来实现，该技术使用了一个固定的比例填充，使得容器保持所需的宽高比，然后使用 absolute 定位来放置图片，并设置其宽度和高度以适应容器。以下是一个示例：

HTML

<div class="image-container">
  <img src="your-image-url.jpg" alt="Example Image">
</div>

CSS

.image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio (9 / 16 * 100) */
  overflow: hidden;
}
 
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

解释

1. .image-container 设置为 relative 定位，并通过 padding-top 来创建一个 16:9 的宽高比容器。
2. padding-top: 56.25% 通过百分比填充方式来确保容器保持 16:9 的比例。计算方法为 (9 / 16) * 100 = 56.25%。
3. img 元素设置为 absolute 定位，确保它填充容器的整个区域。
4. object-fit: cover 确保图片在容器中填充时保持其宽高比，不会被拉伸。

这种方法可以确保图片在不同屏幕大小下都能保持 16:9 的比例，同时也不会失真。