【保存版】CSSで画像を自動トリミング＆中央揃え！今すぐ使えるサンプルコード付き

2024-06-01

CSSで画像を自動的にトリミングして中央揃えする方法

object-fit プロパティ

このプロパティは、要素内の画像をどのように表示するかを指定します。cover値を設定すると、画像のアスペクト比を維持しながら、要素全体を覆うように画像がトリミングされます。

.image {
  object-fit: cover;
}

このプロパティは、トリミングされた画像の位置を要素内で指定します。デフォルトでは中央に配置されますが、top left、center rightなど、他の値を使用して位置を変更することもできます。

.image {
  object-fit: cover;
  object-position: top left;
}

例

以下のコードは、画像を自動的にトリミングして中央揃えする例です。

.image {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

このコードは、幅200px、高さ150pxの要素を作成します。要素内の画像は、アスペクト比を維持しながら要素全体を覆うようにトリミングされ、中央に配置されます。

補足

object-fitプロパティは、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、background-sizeとbackground-positionプロパティを使用して同様の効果を得ることができます。
画像によっては、トリミングによって重要な情報が失われてしまう場合があります。そのような場合は、object-fit: containを使用して、画像全体を表示するように設定することを検討してください。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSSで画像を自動トリミングして中央揃えする</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="image-container">
    <img src="image.jpg" alt="画像の説明">
  </div>
</body>
</html>

CSS

.image-container {
  width: 200px;
  height: 150px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

このコードは、以下のようになります。

HTMLファイルで、image-containerというクラスを持つ div要素を作成します。
div要素内に、image.jpgという画像ファイルへのパスを持つimg要素を作成します。
img要素に対して、幅と高さを100%に設定し、object-fitプロパティをcover、object-positionプロパティをcenterに設定します。

この設定により、画像がimage-container要素全体を覆うようにトリミングされ、中央に配置されます。

上記のコードはあくまで一例です。必要に応じて、幅、高さ、画像ファイルのパスなどを変更してください。
object-fitプロパティとobject-positionプロパティは、さまざまな値を組み合わせることで、画像を様々な方法でトリミングして配置することができます。詳細については、CSSのドキュメントを参照してください。

CSSで画像を自動的にトリミングして中央揃えするその他の方法

background-imageプロパティを使用する

この方法は、要素の背景に画像を設定する場合に有効です。

.image-container {
  width: 200px;
  height: 150px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

padding-topとpadding-bottomプロパティを使用する

.image-container {
  width: 200px;
  height: 150px;
  position: relative;
}

.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

calc()関数を使用する

.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

画像を要素の背景として設定したい場合は、background-imageプロパティを使用します。
要素の幅と高さを動的に調整したい場合は、calc()関数を使用します。

これらの方法は、それぞれ異なる利点と欠点があります。最適な方法は、特定のニーズによって異なります。

その他の考慮事項

画像の解像度とアスペクト比を考慮する必要があります。画像の解像度が低すぎると、画像が粗く見える可能性があります。画像のアスペクト比が要素のアスペクト比と一致しない場合は、画像が引き伸ばされたり圧縮されたりする可能性があります。
画像の品質を維持する必要があります。画像をトリミングすると、画像の品質が低下する可能性があります。
レスポンシブデザインを考慮する必要があります。Webサイトがさまざまなデバイスで表示されるように設計されている場合は、画像がすべてのデバイスで正しく表示されるようにする必要があります。

css