ホームページを大規模に変更後、休み中、自宅でホームページみてたんですが、画像の縦横比がおかしくないですか？という指摘が社内から入りました。

自宅で見てくれたということを嬉しく思いつつも、縦横比を確保したまま表示するのは困難という結論で放置していた問題です。

もやもやしていたものの、指摘をうけたので、万人受けするために一念発起。

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

上記を参考に色々と対応してみました。

imgタグではなく、spanタグを利用する、background-sizeプロパティを利用するなんていうのは分かるはずもないですね…。

IE9以上が有効なようですが、アクセス履歴から判断するに、IE8以下の数%の皆様にはご不便をおかけし、しょうがないとします。

すいません…。

対応前でびよーんと伸びてる。

対応後で縦横比を保ったままスッキリ！

これですっきりしました。