2カラムレイアウト 3:2 Images picture 詳細版
3:2比率の画像とpictureを使った2カラムのレスポンシブのレイアウトサンプル。
2-2-2カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex gap-14">
<div class="flex-2-2-2-for-3-2">
<picture>
<source media="(max-width:416px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-2-2-2-372-248.jpg" width="372" height="248">
<source media="(max-width:464px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-2-2-2-420-280.jpg" width="420" height="280">
<img decoding="async" loading="lazy" src="https://example.com/img/spacer.png" data-src="https://example.com/img/img-2-2-2-930-620.jpg" alt="テスト画像" width="930" height="620" class="lazyload ar3-2 fadein">
</picture>
</div>
</div>
●ウィンドウサイズ416px以下の時に表示させる画像
https://example.com/img/img-2-2-2-372-248.jpg
●ウィンドウサイズ417px～464pxの時に表示させる画像
https://example.com/img/img-2-2-2-420-280.jpg
●それ以外（ウィンドウサイズ465px以上）の時に表示させる画像
https://example.com/img/img-2-2-2-930-620.jpg
■画像サイズのイレギュラー
※ウィンドウ幅「416px」と「464px」と「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。
■PC用レイアウトの時の注意
※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-14とflex-2-2-2-for-3-2で調整。
2-2-1カラム
■Windowsの「高DPI設定」と「通常DPI設定」の両方で2倍の画像を表示させる
<div class="main-inner flex gap-14">
<div class="flex-2-2-1-for-3-2">
<picture>
<source media="(max-width:416px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-2-2-1-768-512.jpg" width="768" height="512">
<source media="(max-width:464px)" srcset="https://example.com/img/spacer.png" data-srcset="https://example.com/img/img-2-2-1-864-576.jpg" width="864" height="576">
<img decoding="async" loading="lazy" src="https://example.com/img/spacer.png" data-src="https://example.com/img/img-2-2-1-930-620.jpg" alt="テスト画像" width="930" height="620" class="lazyload ar3-2 fadein">
</picture>
</div>
</div>
●ウィンドウサイズ416px以下の時に表示させる画像
https://example.com/img/img-2-2-1-768-512.jpg
●ウィンドウサイズ417px～464pxの時に表示させる画像
https://example.com/img/img-2-2-1-864-576.jpg
●それ以外（ウィンドウサイズ465px以上）の時に表示させる画像
https://example.com/img/img-2-2-1-930-620.jpg
■画像サイズのイレギュラー
※ウィンドウ幅「976px以上」の時の画像は3:2の比率の画像が整数にならず、表示枠より少し大きいサイズの3:2の画像を使用。
■PC用レイアウトの時の注意
※3分割のレイアウトで3:2の画像を使う時は表示サイズが整数にならず、画像がぼやけるので表示サイズが整数になるように3:2画像専用のCSSgap-14とflex-2-2-1-for-3-2で調整。
Menu
