Html

画面サイズに応じて画像のソースを変更する



Changing Image Src Depending Screen Size



解決：

これは私のために働いています。このタグに精通しているかどうかはわかりませんが、CSSも必要ありません。

  IfItDoesntMatchAnyMedia  
この場合、「BigImage」はデバイスの幅が900pxを超えると表示されます。 480pxを超える場合は「MediumImage」、480px未満の場合は「OtherImage」。 min-widthの代わりに 'max-width：900px'を使用した場合、幅が900pxを超えると表示されます。

 
 
それが役に立てば幸い！
  
これは私のために働いています：
 
 
 
＃main-img {高さ：250px; width：100％} @media screen and（max-width：767px）{＃main-img {background-image：url（http://subtlepatterns.com/patterns/dark_embroidery.png）; }} @media screen and（min-width：768px）{＃main-img {background-image：url（http://subtlepatterns.com/patterns/dark_embroidery.png）; }} @media（min-width：992px）{＃main-img {background-image：url（http://subtlepatterns.com/patterns/paisley.png）; }} @media（min-width：1200px）{＃main-img {background-image：url（http://subtlepatterns.com/patterns/paisley.png）; }}
   
画面サイズに基づいて画像をロードする機能はすでにあります。そのためにCSSメディアクエリは必要ありません。データベースからの動的画像をロードするために、メディアクエリをその場で作成することは現実的ではないためです。
 
解決 ：
 
使用するsrcset属性
 
 
 
例 ：
 
 良い  
上記のコードで定義する必要があるのは、コンマで区切られた画像の横の幅のサイズだけです。
 
それが役に立てば幸い ：-）