Solusi modern untuk masalah CSS lama (bagian 3): Menskalakan gambar dengan CSS

Salam pembuka. Ini adalah terjemahan dari artikel "Gambar Responsif Lebar Penuh Hanya-CSS 2 Cara" yang diterbitkan pada 14 April 2020 oleh Stephanie Eckles

Ini adalah artikel ketiga dalam seri yang membahas cara-cara modern untuk memecahkan masalah CSS yang telah saya hadapi selama lebih dari 13 tahun sebagai pengembang 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 ,