CSSで縦横比を維持したまま画像のサイズを縮小させる方法!
サイトに画像を掲載する際、多くの場合は画像の縦横比を維持したまま縮小したいと思います。今回はCSSで縦横比を維持したまま画像を縮小する方法を解説します。このCSSの書き方は頻出ですので今回でしっかりとマスターしてください。
CSSで縦横比を維持したまま画像のサイズを縮小させたい
まずは以下のサンプルコードをご覧ください。
このようにCSSでスクリーンの大きさに合わせて画像の縦横比を維持したまま、縮小させる方法を今回解説します。
CSSで縦横比を維持したまま画像のサイズを縮小させる方法
HTMLにstyle属性を直接指定している場合
基本img
要素に直接style
属性で画像の大きさを直接指定することはありません。
直接指定してしまうとCSSでスタイルを指定しないと縦横のアスペクト比が崩れる原因となってしまうからです。CSSで柔軟にスタイルを決めるためにもHTMLのimg
要素に直接style
属性を指定するのはやめておきましょう。
仮にimg
要素にwidth
属性、height
属性を指定している場合、CSSでwidth
プロパティ、height
プロパティを指定しないとstyle
属性が優先されて縦横比が崩れてしまいます。
このように横幅いっぱいに画像を表示するときなど、縦横比を自分で計算してCSSに落とし込める場合は問題ありませんが、width
プロパティの値に50%や100%などで親要素に対する割合を指定している場合には高さを直接計算できません。横幅が環境によって異なるため、高さも同様に変化してしまうからです。
横幅に対して高さが計算できない時は、高さを自動で可変にするためにheight
プロパティに対してauto
を指定します。そうするとimg
要素のwidth
プロパティに合わせてheight
プロパティが自動計算され縦横の比率を維持したまま縮小することができます。
以下のサンプルコードをご覧ください。横幅に合わせる形で高さが自動調節され縦横比が維持されたまま縮小されているのがわかります。
画像を中央に寄せたい場合
CSSで縦横比を維持したまま縮小する方法を学びました。
また、img
要素はdiv
タグやp
タグで囲むことことが多いです。この場合は親要素(div
タグやp
タグ)で横幅を指定し、子要素であるimg
タグ自体にはwidth
プロパティに100%、height
プロパティにauto
を指定することで比率を維持したまま、中心に合わせることができます。
以下のサンプルコードをご覧ください。