New サムネイル Pythonの高階関数reduceの使い方:gcdを使って3つ以上の最大公約数を求めてみよう New サムネイル 草冠に祭りと書いて「蔡」の読み方と画数 New サムネイル 草を分けると書く「芬」の読み方と画数:「芬」はフィンランドの漢字表記「芬蘭」に使われる

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

広告

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

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

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

object-fit: cover;

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

広告

広告

広告

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

Python入門

Python入門

化学入門

化学入門

漢字辞典

漢字辞典

整数辞典

漢字辞典

Lord Candy

Lord Candy