簡単！CSSだけで画像トリミングする方法【レスポンシブ対応「object-fit」と「aspect-ratio」】

2023.12.18

はるるるｒ

ワードプレスでお知らせやブログの機能を作っていてしばしば出くわす問題があります。

サムネイルサイズが記事毎に違っててがたがたするなぁ・・・

推奨サイズは決めているからその通りのサイズで統一して作っていればいいのですが、中には横長の画像だったり、縦長の画像だったり、めちゃくちゃサイズの大きい画像だったりすることがよくあります。

今回はそんな時にオススメの誰がどうやってもサムネイルサイズ統一して表示する方法を紹介します。

Contents

とりあえず結論

画像の縦横比を保ちながらトリミングする必要がある場合、CSSの

「object-fit」と「aspect-ratio」

が非常に役立ちます。

「object-fit」とは、CSS3で導入されたプロパティで、画像をコンテナに合わせてトリミングし、縦横比を維持するために使用されます。

このプロパティを使用すると、画像をコンテナに合わせて表示でき、トリミングの方法を調整できます。

「aspect-ratio」とは、CSS4で導入されたプロパティで、要素の縦横比を指定するために使用されます。

これにより、要素のサイズを変更しても縦横比が保たれ、レスポンシブデザインに適しています。

CSS「object-fit」と「aspect-ratio」を使用して画像の縦横比を維持しながらトリミングする方法は以下の手順を踏みます。

と言ってもめちゃくちゃ簡単なのでご安心を。

まず、HTMLファイルをセットアップします。以下は、画像を含むシンプルなHTMLコードの例です。

<div class="image-container">
  <img src="your-image.jpg" alt="トリミングされた画像">
</div>

画像タグの"your-image.jpg"には表示したい画像のファイルパスを設定してください。

次に、CSSファイルを作成し、画像のトリミングと縦横比の維持を設定します。

.image-container img{
  object-fit: cover;
  width: 768px;/* 横幅の指定 */
  aspect-ratio: 4 / 3;/* ここにアスペクト比を入れる */
}

widthの指定は無くても動作しますが、表示領域よりも小さい画像があった場合に表示が崩れてしまいます。
アスペクト比の計算はこちら

この方法を使用すると、画像を縦横比を維持しながらトリミングすることができ、どんなデバイスでも美しい画像表示を実現できます。試してみてください！

harurururu