CSSで縦横比を維持したまま画像のサイズを縮小させる方法!

サイトに画像を掲載する際、多くの場合は画像の縦横比を維持したまま縮小したいと思います。今回はCSSで縦横比を維持したまま画像を縮小する方法を解説します。このCSSの書き方は頻出ですので今回でしっかりとマスターしてください。

コンテンツ [表示]

  1. 1CSSで縦横比を維持したまま画像のサイズを縮小させたい
  2. 2CSSで縦横比を維持したまま画像のサイズを縮小させる方法
  3. 2.1HTMLにstyle属性を直接指定している場合
  4. 2.2画像を中央に寄せたい場合

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を指定することで比率を維持したまま、中心に合わせることができます。

以下のサンプルコードをご覧ください。

GeekHive採用サイト

関連記事