イメージを画面サイズに応答させるにはどうしたらいいですか？

Question

同じサイズの括弧で画面サイズが小さくなると徐々に縮小するのではなく、画面サイズがあるサイズから次のサイズになるときに、画像をxピクセルからyピクセルにジャンプさせたいと思う。 img-responsiveを適用すると、徐々に下がり、col-x-yクラスを動作させることができなくなります。

Answer 1

下記のようにhtml画像タグを使用できます。この例では、画面サイズに応じて異なる画像サイズをロードします。しかし、このフォーマットに基づいて画像の幅を調整することもできます。コードはthis code lab.

<picture> 
<source media="(min-width: 750px)" 
     srcset="images/horses-1600_large_2x.jpg 2x, 
       images/horses-800_large_1x.jpg" /> 
<source media="(min-width: 500px)" 
     srcset="images/horses_medium.jpg" /> 
<img src="images/horses_small.jpg" alt="Horses in Hawaii"> 
</picture> 

からです。