只用CSS的全宽响应图像2种方法

在不远的过去，当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 解决方案进行设置的情况。

首先，在HTML中，图片被插入到style 属性中，作为一个background-image 。鼓励使用一个aria-label ，以取代通常存在于普通img 标签中的alt 属性。

<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，根据caniuse的数据，在没有polyfill的情况下，你是无法使用的。

这个样式是直接放在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 是最适合你的环境的。