ウェブデザインにおいて、画像の縦横比を保ちながらコンテナに収めることは、美しいレイアウトを実現するために重要です。今回は、CSSのobject-fitプロパティを使って、簡単に画像をトリミングする方法をご紹介します。
object-fitプロパティとは？
object-fitプロパティは、画像や動画などのコンテンツを指定したボックスにどのようにフィットさせるかを決定するCSSプロパティです。これにより、画像の縦横比を保ちながら、ボックス内に収めることができます。
基本的な使い方
まずは、HTMLとCSSの基本的な構造を確認しましょう。
<div class="image-container">
<img src="path/to/your/image.jpg" alt="Sample Image">
</div>
次に、CSSを設定します。
.image-container {
width: 300px; /* 好みの幅に設定 */
height: 200px; /* 好みの高さに設定 */
overflow: hidden; /* コンテナのサイズを超える部分を隠す */
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* 縦横比を保ちつつ、コンテナにフィットさせる */
object-position: center; /* 画像の中心を表示 */
}
object-fitのオプション
| オプション | 説明 |
|---|---|
| contain | 画像全体を表示し、縦横比を保ちながらコンテナに収めます。画像はコンテナ内に収まるように縮小されます。 |
| cover | 画像をコンテナにフィットさせ、縦横比を保ちながら拡大・縮小します。コンテナを満たすために、画像の一部が切り取られることがあります。 |
| fill | 画像をコンテナのサイズに合わせて引き伸ばします。縦横比は保持されません。 |
| none | 画像は元のサイズのまま表示されます。 |
| scale-down | noneやcontainを使った場合と同じサイズのいずれか小さい方を適用します。 |
実践例
具体的な例を見てみましょう。
<div class="example-container">
<img src="path/to/another/image.jpg" alt="Example Image">
</div>
.example-container {
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc; /* デバッグ用の枠線 */
}
.example-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top; /* 画像の上部を表示 */
}
よくある質問（FAQ）
Q. CSSのobject-fitで縦横比を維持しながら画像をトリミングするには？
A. img { object-fit: cover; width: 100%; height: 200px; }で固定高さの領域に画像を中央からクリップして表示します。object-positionで焦点位置も調整できます。
Q. object-fit: containとcoverの違いは？
A. coverは要素全体を埋めるよう拡大縮小し、比率を維持しながらはみ出た部分をクリップします。containは要素内に収まるよう拡大縮小し、余白が生じます。
Q. background-sizeのcoverとobject-fitのcoverの違いは？
A. 機能は同様ですが、background-sizeは背景画像に使い、object-fitはimg要素に使います。imgタグのSEO・アクセシビリティ上の利点を得るにはobject-fitが推奨です。
まとめ
object-fitプロパティを使うことで、画像の縦横比を保ちながら、コンテナに美しく収めることができます。ぜひ、このプロパティを活用して、魅力的なウェブデザインを実現してください。