解决旧CSS问题的现代解决方案（第3部分）：使用CSS缩放图像

问候。这是斯蒂芬妮·埃克斯（Stephanie Eckles）于2020年4月14日发表的文章“仅CSS全宽度响应图像2种方式”的翻译

这是该系列的第三篇文章，探讨了我作为前端开发人员已经解决13年以上的CSS问题的现代解决方案。

, JQuery " ", JQuery- Backstretch

- 30 , ( , IE 9 ). :

background-size: cover;

caniuse.com, 9 . , Backstretch , .

img

object-fit: cover;

, , .

background-size: cover

10 , WordPress. background-size: cover .

, background-image HTML- style. 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, 16:9 div-, :

.card__img {
  background-size: cover;
  background-position: center;

  /*   16:9 */
  padding-bottom: 62.5%;
}

:

object-fit: cover

, , caniuse, , IE Edge < 16

img, HTML- , div img 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, , background-size ( 2020 , ).

, .

background-size:

• , - . ,
• , img
• img

object-fit:

• img ,