srcset属性について〜レスポンシブ画像を表示する時に使ってみよう〜
srcset属性とは?
- picture 要素内で使用する source 要素や、img 要素において、複数のイメージソースを指定するために使用
- srcsetはHTML5で策定された新属性
- 使えないブラウザもあるので注意(対応ブラウザ)
レスポンシブ画像でのsrcset属性のメリット、デメリット
srcsetによる画像の指定
<img src="smaill.jpg"
srcset="medium.jpg 640w, large.jpg 1280w">
srcsetによる画像の指定
<img src="smaill.jpg"
srcset="medium.jpg 640w, large.jpg 1280w">
上記の例のように画像と画像の幅を指定できます。
secset属性に対応していないブラウザでは、srcで指定された画像が表示されます。。
画像幅に応じた画像が表示される。
レスポンシブ画像でのsrcset属性を使うメリット
- メディアクエリなしで、 画像幅にあった最適が画像を表示される
- 複数設定できるので、複数の画面サイズに合わせるうことができる
- 画像サイズを変えなければ、他の画像をブラウザ側が読み込む必要がない
## レスポンシブ画像でのsrcset属性を使うデメリット
- 同じ縦横比の画像しか使えない。(縦横比がまちまちだと予想外の結果になる可能性がある)
同じ縦横比の画像がない場合は?
- CSSでメディアクエリで使う
- を使う
スクリーンの幅によって画像を変更したい場合は?
=> sizes属性を使う!
<img src="smaill.jpg"
srcset="medium.jpg 640w, large.jpg 1280w"
sizes="(min-width: 704px) 50vw 100vw">
この例では、704ピクセル以上の幅の画面では、画像がビューポートの幅の50%になるようにしています。
また、メディアクエリなしの場合は、画像のデフォルトの幅(=今回は100%)を設定します。
参考
Author And Source
この問題について(srcset属性について〜レスポンシブ画像を表示する時に使ってみよう〜), 我々は、より多くの情報をここで見つけました https://qiita.com/roko18366758/items/0b007e7505adbdf8d6de著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .