图片等比加不拉升

1. 使用 <img> 标签的方法

HTML:

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

CSS:

.image-container {
  width: 100%;
  padding-top: calc(100% / (16 / 3)); /* 16:3 宽高比 */
  position: relative;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片覆盖整个容器 */
}

• .image-container 设置了宽度为 100%，这意味着它会根据父元素的宽度自适应。padding-top 的值计算了宽高比，这里是 16:3。通过设置 padding-top，我们保证了容器的高度相对于宽度保持恒定，从而保持了图片的宽高比。
• position: relative 是为了允许内部的 <img> 元素相对于此容器进行绝对定位。
• overflow: hidden 确保图片不会溢出容器。
• .image-container img 设置了绝对定位，使图片充满整个容器。object-fit: cover 确保图片覆盖整个容器区域，同时保持原图的比例，可能需要裁剪部分图片。

2. 使用背景图的方法

HTML:

<div class="image-container"></div>

CSS:

.image-container {
  width: 100%;
  padding-top: calc(100% / (16 / 3)); /* 16:3 宽高比 */
  background-image: url('your-image.jpg');
  background-size: cover; /* 确保图片覆盖整个容器 */
  background-position: center; /* 居中对齐图片 */
  background-repeat: no-repeat; /* 防止图片重复 */
}

• 这里的 .image-container 类似于第一个例子中的设置，但是使用了 background-image 属性来设置背景图片。
• background-size: cover 确保背景图片填充整个容器区域，同时保持原图比例，可能会裁剪部分图片。
• background-position: center 将背景图片居中显示。
• background-repeat: no-repeat 防止背景图片在容器内重复。

这两种方法都能有效地保持图片的宽高比，并确保图片或背景图填充整个容器。选择哪种方式取决于具体的应用场景和个人偏好。使用 <img> 标签可以更容易地控制图片的行为，而使用背景图则可以让页面更简洁，特别是在处理复杂的布局时。