商品情報にスキップ
1 1
公開日:2023.01.13

Shopifyでサイズの異なる画像を扱う際は、CSSのaspect-ratio: n/nとobject-fit: cover;プロパティの組み合わせが便利

Shopifyでサイズの異なる画像を扱う際は、CSSのaspect-ratio: n/nとobject-fit: cover;プロパティの組み合わせが便利

用途

  • スタイル(CSS)編集

実装方法

  • HTML/CSS
詳細を表示する

サイズの異なる画像を扱う際は、CSSのaspect-retioとobject-fit: cover;プロパティの組み合わせが便利です。比較的新しいプロパティですが、モバイル含めて既にほぼ全てのモダンブラウザで利用可能になっています。

異なるサイズの画像を揃えてレイアウト可能

モバイル含めて既にほぼ全てのモダンブラウザで利用可能

関連ポスト