Solutions modernes aux anciens problèmes CSS (partie 3): mise à l'échelle des images avec CSS

Salutations. Voici une traduction de l'article "Images responsives pleine largeur CSS-Only 2 Ways" publié le 14 avril 2020 par Stephanie Eckles

Ceci est le troisième article d'une série sur les moyens modernes de résoudre les problèmes CSS auxquels je suis confronté depuis plus de 13 ans en tant que développeur front-end.

, 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 ,