【CSS】縦横比を保ちながら画像をトリミングする方法

ウェブデザインにおいて、画像の縦横比を保ちながらコンテナに収めることは、美しいレイアウトを実現するために重要です。今回は、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; /* 画像の上部を表示 */
}

まとめ

object-fitプロパティを使うことで、画像の縦横比を保ちながら、コンテナに美しく収めることができます。ぜひ、このプロパティを活用して、魅力的なウェブデザインを実現してください。