如何优雅地显示通栏比例图片，保证无裁剪无留白？

如何优雅地显示通栏比例图片，保证无裁剪无留白？

当我们想要在网页中展示一张比例固定的通栏图片时，经常会遇到图片变形或内容被裁剪的问题。为了解决这一难题，我们可以根据图片的比例灵活运用 css 样式，实现图片的无裁剪无留白显示。

方案 1：针对 img 标签

如果使用的是 img 标签，可以尝试以下代码：

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

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

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures the image covers the container */
}

方案 2：针对背景图

如果图片作为背景图加载，可以使用以下代码：

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

.image-container {
  width: 100%;
  padding-top: calc(100% / (16 / 3)); /* 16:3 aspect ratio */
  background-image: url('your-image.jpg');
  background-size: cover; /* Ensures the image covers the container */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
}

通过以上灵活的 css 样式配置，可以优雅地显示通栏图片，确保图片保持原始比例，无裁剪且无留白。