Irohabook
CSS ブロック要素

CSSでサムネイル画像をデザインする(幅と高さを設定しつつ、画像を縦横比そのままに表示する)

広告

縦横比を保ちながら、画像の幅と高さを設定するには object-fit: cover を使います。

.thumbnail a img {
    height: 96px;
    object-fit: cover;
    width: 96px;
}

上は、サムネイル画像の幅と高さを 96px に設定しつつ、縦横比一定で表示します。

object-fit: cover;

を設定しないと、もとの画像を無理やり一辺が 96px の正方形に圧縮してしまい、画像は縦または横につぶれてしまう。

CSS WordPress

広告

コンピューター コンピューター
プログラミング プログラミング
数学 数学
英語 英語
国語 国語
理科 理科
社会 社会