縦横比を維持したまま横幅いっぱいに画像を表示 では、元の画像の大きさに関係なく、横幅いっぱいに表示されます。そのため、縦長の画像をパソコンなどの横幅の広い画面に表示すると、巨大なボケた画像になってしまいます。
そこで、ウィンドウ幅が元の画像幅よりも大きい時は、横幅いっぱいまで広げないで元の画像の幅で表示する方法を考えました。
HTML
補足
- 元の画像幅以上に拡大表示させたくない時は、frame-img に加えて width-auto クラスも指定します。
CSS
補足
- frame-img クラスに加えて、上記 width-auto クラスの CSS を指定しておきます。