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

2024-09-25

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

この記事ではCSS4行で実装しています。

SWELLでCSSの記述方法が分からない方は下記の記事を参考にしてください。

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

コード

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

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

白銀比率　→ 1:1.414
黄金比率　→ 1:1.618
一眼　　　→ 3:2
ワイド　　→ 16:9
横長　　　→ 2:1
超横長　　→ 5:2
正方形　　→ 1:1

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;
}

よかったらシェアしてね！

URLをコピーしました！