Modern solutions to old CSS problems (part 3): Scaling images with CSS

Greetings. Here is a translation of the article "CSS-Only Full-Width Responsive Images 2 Ways" published on April 14, 2020 by Stephanie Eckles

This is the third article in a series looking at modern ways of solving CSS problems that I have faced for over 13 years as a front-end developer.

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