【SWELL】記事詳細のアイキャッチ画像の縦横比を変更【CSS4行】

SWELLを使用していて
「記事詳細ページのアイキャッチ画像の縦横比を変更したい！」
「記事一覧ページと同じ比率にしたい！」
と思ったことはありませんか？

この記事ではCSS4行で実装する方法をご紹介しています。

記事詳細ページのアイキャッチ画像の縦横比を指定する方法

コード

.p-articleThumb__img {
    aspect-ratio: 4 / 1;
    object-fit: cover;
}

SWELLのカスタマイザーで設定可能な縦横比

下記は記事一覧ページで設定可能なアイキャッチ画像の縦横比になります。

同じ値にすることで記事一覧ページと記事詳細ページのアイキャッチ画像の縦横比を揃えることが出来ます。

CSSコードにすると下記になります。

.p-articleThumb__img {
    aspect-ratio: 1 / 1.414;
    aspect-ratio: 1 / 1.618;
    aspect-ratio: 3 / 2;
    aspect-ratio: 1 / 9;
    aspect-ratio: 2 / 1;
    aspect-ratio: 5 / 2;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

まとめ｜SWELL-記事詳細ページのアイキャッチ画像の縦横比を変更する方法【CSS4行】

• 記事詳細ページのアイキャッチ画像の縦横比を変更する方法を紹介
• CSS4行で簡単に実装可能
• 記事一覧ページと同じ縦横比に設定することも可能でデザインの統一感を向上
• 縦横比は「黄金比」や「白銀比」などから選択可能
• aspect-ratioプロパティとobject-fit: cover;で柔軟に調整可能