如何让通栏banner图片等比例显示，不出现裁剪或留白？

如何让通栏banner图片无变形、完整显示不裁剪

在网页设计中，我们经常需要使用图片作为banner背景。但如何设置图片的属性，才能使其等比例完整显示，不出现裁剪或留白呢？

解决这个问题的方法如下：

1. 使用 <div> 容器和 img 标签

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

image-container 样式：

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

img 样式：

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

2. 使用背景图

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

image-container 样式：

.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; /* 防止图片重复 */
}

通过上述设置，无论使用 img 标签还是背景图，都可以让通栏banner图片以等比例完整显示，不会出现裁剪或留白。