2カラムレイアウト 16:9 Images picture 詳細版
16:9比率の画像とpictureを使った2カラムのレスポンシブのレイアウトサンプル。
2-2-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-2-2-2">
<picture>
<source media="(max-width:416px)" srcset="[template_url]/img/spacer.png" data-srcset="[template_url]/img/img-2-2-2-320-180.jpg" width="320" height="180">
<source media="(max-width:464px)" srcset="[template_url]/img/spacer.png" data-srcset="[template_url]/img/img-2-2-2-416-234.jpg" width="416" height="234">
<img decoding="async" loading="lazy" src="[template_url]/img/spacer.png" data-src="[template_url]/img/img-2-2-2-928-522.jpg" alt="テスト画像" width="928" height="522" class="lazyload ar16-9 fadein">
</picture>
</div>
</div>
●ウィンドウサイズ416px以下の時に表示させる画像
https://example.com/img/img-2-2-2-320-180.jpg
●ウィンドウサイズ417px~464pxの時に表示させる画像
https://example.com/img/img-2-2-2-416-234.jpg
●それ以外(ウィンドウサイズ465px以上)の時に表示させる画像
https://example.com/img/img-2-2-2-928-522.jpg
■画像サイズのイレギュラー
※ウィンドウ幅「416px」の時の画像は16:9の比率の画像が整数にならず、PageSpeed Insights用の1.75倍の画像より少し小さいサイズの16:9の画像を使用。
2-2-1カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex">
<div class="flex-2-2-1">
<picture>
<source media="(max-width:416px)" srcset="[template_url]/img/spacer.png" data-srcset="[template_url]/img/img-2-2-1-672-378.jpg" width="672" height="378">
<source media="(max-width:464px)" srcset="[template_url]/img/spacer.png" data-srcset="[template_url]/img/img-2-2-1-864-486.jpg" width="864" height="486">
<img decoding="async" loading="lazy" src="[template_url]/img/spacer.png" data-src="[template_url]/img/img-2-2-1-928-522.jpg" alt="テスト画像" width="928" height="522" class="lazyload ar16-9 fadein">
</picture>
</div>
</div>
●ウィンドウサイズ416px以下の時に表示させる画像
https://example.com/img/img-2-2-1-672-378.jpg
●ウィンドウサイズ417px~464pxの時に表示させる画像
https://example.com/img/img-2-2-1-864-486.jpg
●それ以外(ウィンドウサイズ465px以上)の時に表示させる画像
https://example.com/img/img-2-2-1-928-522.jpg