ロゴ

Blog

picture要素のmedia属性でorientationを使う

デバイスの幅によって、表示画像(img)を変えたいときに便利な<picture>要素。<source>要素のmedia属性は、メディアクエリ(media queries)と同様の指定ができる。

<picture>
<source media="(max-width: 600px)" srcset="sample_sp.png">
<img src="sample.png" alt="サンプル">
</picture>

幅だけではなく、デバイスの向きによっても、画像の出し分けが可能。これが地味に便利。

<picture>
<source media="(max-width: 834px) and (orientation: portrait)" srcset="sample_tb.png">
<img src="sample.png" alt="サンプル">
</picture>

Back to Top