仅使用 CSS 实现全宽响应式图像的两种方法

这是系列文章的第三篇，该系列文章探讨了过去 13 多年来我作为前端开发者所遇到的各种问题，并提出了相应的解决方案。访问ModernCSS.dev可以查看整个系列文章及其他资源。

在不久的过去，当 jQuery 成为山中之王并且 CSS3 仍然值得被这样指定时，最流行的响应式背景图像工具是Backstretch jQuery 插件。

在以下属性得到更多支持之前（即 IE < 9 的总市场份额下降），我在大约 30 个网站上使用了这个插件：

background-size: cover;

根据caniuse.com 的统计，这项属性和价值在过去 9 年多的时间里一直得到良好的支持！但那些与 Backstretch 或其他自主研发解决方案相关的网站可能尚未更新。

替代方法利用标准img标签，并使用以下魔力：

object-fit: cover;

让我们看看如何使用每个解决方案，并了解何时选择其中一个。

使用background-size: cover

我十年来一直致力于为企业网站创建高度定制的 WordPress 主题和插件。因此，以模板卡片为例，以下是您可以如何使用该background-size: cover解决方案进行设置。

style首先，在 HTML 中，图像以 的形式插入到属性中background-image。aria-label鼓励使用 来代替alt通常出现在常规img标签中的 属性。

<article class="card">
  <div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/320/240/tech)"></div>
  <div class="card__content">
    <h3>Whizzbang Widget SuperDeluxe</h3>
    <p>
      Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
      biscuit marzipan. Macaroon pie sesame snaps jelly-o.
    </p>
    <a href="#" class="button">Add to Cart</a>
  </div>
</article>

相应的 CSS 如下，其中padding-bottom一个奇怪的技巧用于在包含图像的 div 上设置 16：9 的比例：

.card__img {
  background-size: cover;
  background-position: center;
  // 16:9 ratio
  padding-bottom: 62.5%;
}

整个解决方案如下：

使用object-fit: cover

此解决方案是一个较新的播放器，如果您需要支持 IE < Edge 16（根据没有 polyfill 的caniuse 数据），则无法使用此解决方案。

此样式直接放置在img标签上，因此我们将卡片 HTML 更新为以下内容，将 交换aria-label为alt：

<article class="card">
  <img class="card__img" alt="Preview of Whizzbang Widget" src="https://placeimg.com/320/240/tech"/>
  <div class="card__content">
    <h3>Whizzbang Widget SuperDeluxe</h3>
    <p>
      Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
      biscuit marzipan. Macaroon pie sesame snaps jelly-o.
    </p>
    <a href="#" class="button">Add to Cart</a>
  </div>
</article>

然后，我们更新后的 CSS 切换到使用height属性来约束图像，以便任何尺寸的图像都符合约束的比例。如果图像的固有尺寸大于约束的图像尺寸，则该object-fit属性将接管并默认将图像置于卡片容器 + 定义所创建的边界内height：

.card__img {
  object-fit: cover;
  height: 30vh;
}

结果如下：

何时使用每个解决方案

如果您必须支持旧版本的 IE，那么如果没有 polyfill，那么您的解决方案就有限background-size（在 2020 年说出这一点让我很痛苦，但这是一种可能性，特别是对于企业和教育行业而言）。

这两种解决方案都可以根据您控制的宽度：高度比实现全宽响应图像。

选择background-size是否：

• 应用于预期容纳附加内容的容器，例如网站标题背景
• img通过元素不可用的伪元素应用附加效果样式
• 更优雅地应用统一大小的图像
• 图像纯粹是装饰性的，img不需要固有的语义

选择object-fit是否：

• 使用标准img最适合您的上下文，以维护图像提供的所有语义