画像サイズを画面に自動調整：レスポンシブデザインの必須テクニック

2024-04-09

CSS画像サイズ：どのように配置し、引き伸ばさないか？

widthとheight属性

最も基本的な方法は、widthとheight属性で画像の幅と高さを直接指定することです。

img {
  width: 200px;
  height: 150px;
}

この方法では、画像の縦横比が維持されますが、画面サイズによっては画像が小さすぎたり、大きすぎたりする可能性があります。

max-widthとmax-height属性は、画像の最大幅と最大高さを指定します。

img {
  max-width: 200px;
  max-height: 150px;
}

この方法では、画像の縦横比が維持されつつ、指定された最大サイズを超えないように表示されます。

object-fitプロパティは、画像の配置方法を指定します。

img {
  object-fit: contain;
}

contain 値は、画像を容器内に収まるように配置し、縦横比を維持します。

その他の object-fit 値は以下の通りです。

cover: 画像を容器全体に引き伸ばし、縦横比を維持します。
none: 画像の本来のサイズで表示します。

background-sizeプロパティ

画像を背景として使用する場合、background-sizeプロパティでサイズを指定できます。

.container {
  background-image: url(image.jpg);
  background-size: contain;
}

その他の background-size 値は以下の通りです。

これらの方法を組み合わせることで、さまざまな状況に合わせて画像を配置することができます。

HTML

<img src="image.jpg" alt="Image">

CSS

/* 1. widthとheight属性 */

img {
  width: 200px;
  height: 150px;
}

/* 2. max-widthとmax-height属性 */

img {
  max-width: 200px;
  max-height: 150px;
}

/* 3. object-fitプロパティ */

img {
  object-fit: contain;
}

/* 4. background-sizeプロパティ */

.container {
  background-image: url(image.jpg);
  background-size: contain;
}

実行結果

widthとheight属性

画像が200px x 150pxのサイズで表示されます。

object-fitプロパティ

画像が容器内に収まるように配置され、縦横比が維持されます。

background-sizeプロパティ

応用例

これらの方法は、さまざまな状況で利用できます。

レスポンシブデザイン

画面サイズに合わせて画像サイズを自動的に調整したい場合、max-width と max-height 属性または object-fit プロパティを使用できます。

サムネイル画像

画像を一定のサイズで表示したい場合、width と height 属性または max-width と max-height 属性を使用できます。

背景画像

CSSで画像サイズを調整するには、さまざまな方法があります。それぞれの方法の特徴を理解し、状況に合わせて適切な方法を選択することが重要です。

CSS画像サイズ調整：その他の方法

vhとvw単位は、画面の高さ/幅に対する割合を指定します。

img {
  width: 50vw;
  height: 50vh;
}

この方法では、画面サイズに合わせて画像サイズが自動的に調整されます。

calc()関数を使って、計算に基づいて画像サイズを指定できます。

img {
  width: calc(100% - 20px);
  height: calc(50vh - 100px);
}

この方法では、他の要素のサイズなどを考慮して、画像サイズを動的に調整することができます。

メディアクエリを使って、画面サイズごとに画像サイズを切り替えることができます。

@media (max-width: 768px) {
  img {
    width: 100%;
    height: auto;
  }
}

@media (min-width: 768px) {
  img {
    width: 200px;
    height: 150px;
  }
}

この方法では、スマートフォンやタブレットなどのデバイスに合わせて、最適な画像サイズを提供することができます。

JavaScriptを使って、画像サイズを動的に変更することができます。

const img = document.querySelector('img');

function resizeImage() {
  img.width = window.innerWidth / 2;
  img.height = window.innerHeight / 2;
}

window.addEventListener('resize', resizeImage);

resizeImage();