画像の拡大・縮小とアスペクト比の保持方法

こんにちは！ご覧いただきありがとうございます。
今回は、画像の拡大・縮小とアスペクト比（縦横比）を保持する方法を紹介します。アスペクト比を保持することは、画像の歪みを防ぎ、元の画像と同じ比率で拡大・縮小されることを意味します。

方法としては、CSSを使用して画像に対して適切なスタイルを適用することで実現します。具体的には、”max-width”や”max-height”プロパティを使用して、画像のサイズが規定の最大値を超えないようにすることが重要です。

HTML

まず拡大・縮小する画像をHTMLで読み込みます。
”image-container”で画像を囲む理由は、画像を親要素で包むことで、画像のサイズと配置を制御しやすくするためです。親要素にスタイルを適用することで、画像を中央に配置したり、画像とテキストを並べたりすることが簡単になります。

CSS

”image-container”という要素に、その要素の最大幅を指定しています。この幅を変更することによって拡大・縮小が可能となります。
実際の画像幅より小さい幅で指定するとこのように画像を縮小させることができます。

画像自体には”max-width: 100%”を設定し、画像の幅が親要素の幅を超えないように制限しています。

”height: auto”を指定することで、画像の高さは自動的にアスペクト比に応じて調整されます。

aspect-ratio

また、別の方法として”aspect-ratio”というプロパティを用いることでアスペクト比を保つ方法もあります。”aspect-ratio”とは、アスペクト比を設定するCSSのプロパティです。

CSSに　”aspect-ratio: width / height;”　を入力します。
XDのデザインでみるとWがwidthで、Hがheightとなります。

実際にCSSに入力するとこうなります。

.image-container{
  aspect-ratio:1000　/ 750;
}
↓
.image-container{
  aspect-ratio:　4 / 3;
}

このようにして書き換えるとよりわかりやすくなります。

最後に

画像の歪みは見る人に不快感を感じさせる原因になってしまうと思うので、今回学んだ方法を使ってきれいなサイトを作ることができるようにしていきたいです。