HTMLとCSSだけで画像のリサイズをする

縦長と横長の画像がごっちゃになるとリストにしにくいのでCSSでリサイズする方法を調べてみました。
内接リサイズという方法が良さそうなので紹介します。

CSSでたったこれだけ。

HTMLも1行で済む。

classで指定してあげてるだけなので特別なことは何もしていません。

実際にやると下みたいな感じ。

縦長の画像
bsIMG_2844ISUMI

横長の画像
-shared-img-thumb-PA151026033997_TP_V

ちなみにobject-fit: contain;のcontainの部分をcoverにすると外接リサイズにすることができる。外接リサイズにすると写真によっては見切れてしまうので今回は使いませんでした。

参考記事

CSSだけで画像の縦横比を維持したサムネイルを表示する

別の方法とかブラウザ対応も書いてたりします。