SWELL アイキャッチ画像のアスペクト比（縦横比）を固定するカスタマイズ

SWELLで記事の先頭にアイキャッチ画像を表示させ、その画像が縦長だったりすると記事の先頭にそのまま画像が表示されてしまいます。

一方、記事一覧などでは画像の表示領域が固定されているので、はみ出した部分は表示されません。

SWELLは記事一覧のアイキャッチ画像のアスペクト比をカスタマイザーから指定できます。

以前、記事一覧のアイキャッチ画像のアスペクト比を自由に変更するカスタマイズをご紹介しました。

あわせて読みたい

SWELLカスタマイズ｜記事一覧のアイキャッチサイズを自由に変更する SWELLの要望フォーラムに記事一覧のアイキャッチサイズのアスペクト比を追加して欲しいという要望がありました。 記事一覧リストのサムネイル画像の比率、現在でもたく…

アイキャッチ画像を予めトリミングしておけばよいという話なのですが、そのひと手間が面倒だと思う人も多いと思います。

この記事では記事先頭に表示されるアイキャッチ画像をトリミングして表示するカスタマイズをご紹介します。

SWELL アイキャッチ画像のアスペクト比（縦横比）を固定するカスタマイズ

カスタマイズのコード

CSSだけで対応します。

適用するには、追加CSSにコピペで大丈夫です。

アスペクト比を変更したい時は、padding-top:50%を変更してください。

figure.p-articleThumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    position: absolute;
    top: 0;
    object-fit: cover;
}
figure.p-articleThumb:before {
    padding-top: 50%; /* アスペクト比の変更はココ */
    content: "";
    display: block;
}
figure.p-articleThumb {
    position: relative;
    max-height: 500px;
    overflow:hidden; /*追加*/
}

まとめ

この記事では、SWELLの記事先頭のアイキャッチ画像をトリミングして表示するカスタマイズをご紹介しました。

CSSをコピペするだけなので簡単に適用することができます。