古いCSSの問題に対する最新のソリューション(パート3):CSSを使用した画像のスケーリング

こんにちは。これは、2020年4月14日にStephanieEcklesによって公開された記事「CSSのみの全幅応答画像2ウェイ」の翻訳です。





これは、フロントエンド開発者として13年以上にわたって直面してきたCSSの問題を解決する最新の方法を紹介するシリーズの3番目の記事です。



, 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