CSSで画像をリサイズ
画像のサムネイルを表示するときに CSSだけで小さな画像のサイズを調整してみます。
HTMLで画像タグを作成
<img class="image-resize" src="image/mask-image.jpg" alt="サムネール" />
画像の最大サイズを指定(アスペクト比は維持される)
.image-resize { max-width: 180px; max-height: 180px; -ms-interpolation-mode: bicubic; }
※ IEでは、縮小表示させた際、画像が汚くなることがあるのでスタイル -ms-interpolation-mode
を追加しています。