解决旧CSS问题的现代解决方案(第3部分):使用CSS缩放图像

问候。这是斯蒂芬妮·埃克斯(Stephanie Eckles)于2020年4月14日发表的文章“仅CSS全宽度响应图像2种方式”的翻译





这是该系列的第三篇文章,探讨了我作为前端开发人员已经解决13年以上的CSS问题的现代解决方案。



, 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