Soluciones modernas a viejos problemas de CSS (parte 3): escalado de imágenes con CSS

Saludos. Aquí hay una traducción del artículo "2 formas de imágenes receptivas de ancho completo solo con CSS" publicado el 14 de abril de 2020 por Stephanie Eckles

Este es el tercer artículo de una serie que analiza formas modernas de resolver problemas de CSS a los que me he enfrentado durante más de 13 años como desarrollador 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 ,