CSSを使用した画像のアスペクト比の制御方法

1. CSSのpaddingとheightを使用する方法:

HTML:
<div class="image-wrapper">
  <img src="image.jpg" alt="画像">
</div>
CSS:
.image-wrapper {
  position: relative;
  padding-bottom: 75%; /* アスペクト比を設定するためのパディング */
  height: 0; /* コンテナの高さを0に設定 */
}
.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* コンテナいっぱいに画像を表示 */
}

2. CSSのbackground-imageとpaddingを使用する方法:

HTML:
<div class="image-wrapper"></div>
CSS:
.image-wrapper {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  padding-bottom: 75%; /* アスペクト比を設定するためのパディング */
}

3. CSSのobject-fitを使用する方法:

HTML:
<img src="image.jpg" alt="画像" class="image-wrapper">
CSS:
.image-wrapper {
  width: 100%;
  height: 300px; /* 適宜サイズを設定 */
  object-fit: cover;
}

これらの方法は、画像を親要素に合わせてスケーリングするために使用されます。アスペクト比を維持するためのパディングや高さの設定を通じて、画像がレスポンシブに表示されるようになります。

このようにして、画像のアスペクト比を制御するためのいくつかの方法を紹介しました。それぞれの方法は異なる状況に適している場合がありますので、使用する際には要件に応じて選択してください。