Soluções modernas para problemas antigos de CSS (parte 3): Dimensionamento de imagens com CSS

Saudações. Aqui está uma tradução do artigo "Imagens responsivas de largura total somente CSS 2 maneiras" publicado em 14 de abril de 2020 por Stephanie Eckles





Este é o terceiro artigo de uma série que apresenta maneiras modernas de resolver problemas de CSS que enfrentei por mais de 13 anos como desenvolvedor 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 ,



All Articles