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