Web制作実務役立ち

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】
本ページにはプロモーションが含まれています。

いきなり真相に迫りますが、こんな現象に悩んでいませんか?

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

今回紹介するobject-fitを使用すれば、以下のように縦横比を直すことができます。

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】
困っている人

画像の縦横比がレスポンシブなどで崩れないようにしたい。

困っている人

どんな縦横比の画像が入稿されても崩れないように自動トリミングしたい

こんなことを叶えてくれるCSS魔法のプロパティ、それがobject-fitです。

ついにIEが逝去されたことによって、思う存分活用できるようになりました。

しかし決して万能ではなくobject-fitの欠点もあるので、そこも踏まえて解説していきます。

object-fitには、cover、contain、fill、none、scale-down、unsetなどたくさんありますが、ほとんどcoverしか使わないので、object-fit: cover;の解説のみを行います。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

object-fitの使い所

object-fit: cover;の使い所は、大体カードコンポーネントの画像箇所です。

HTMLコーディングだけだと分かりにくいですが、WordPressだと特に「様々なリテラシーの人が画像を入稿する」可能性があります。

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

コーディング段階のデザインカンプで埋め込まれている画像はちょうどよい縦横比になっているかもです。

しかし、リリース後の実際の運用では、例えば以下のような様々な縦横比の画像が入稿される可能性があります。

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

試しに上記の画像を用いて、以下の縦幅横幅だけ指定したコードでカードコンポーネントを構築してみます。

<div class="container">
    <div class="card1">
      <img src="img/6b6da573d740d54c9016244d2cd9172b.png" class="image1">
      <p class="title1">タイトル</p>
      <p class="content1">本文</p>
  </div>
  <div class="card1">
    <img src="img/object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】.jpg" class="image1">
    <p class="title1">タイトル</p>
    <p class="content1">本文</p>
</div>
<div class="card1">
  <img src="img/実務経験者におすすめ!!レバテックフリーランスの案件の特徴や注意点を解説!.png" class="image1">
  <p class="title1">タイトル</p>
  <p class="content1">本文</p>
</div>
  </div><!-- /.container -->
img {
  max-width: 100%;
  height: auto;
}
.container {
  display: flex;
}
.card1 {
  width: 300px;
  margin: 20px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 3px 6px #ccc;
}
.image1 {
  width: 100%;
  height: 200px;
  border-radius: 5px 5px 0 0;
}
.title1 {
  font-size: 150%;
  margin: 10px;
  color: #444;
}
.content1 {
  padding: 10px;
  color: #666;
}

すると、画像が縦に潰れた表示になってしまいました。

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

これを避けるのはとても簡単です。img要素にobject-fit: cover;を追加すれば良いのです。

.image1 {
  width: 100%;
  height: 200px;
  border-radius: 5px 5px 0 0;
  object-fit: cover;
}
object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

object-fit: cover;の仕組み

これは何が起きているのでしょうか。

簡単に言うと、background-size: coverと同様、表示エリアになるべく余白なく画像を表示しようとし、はみ出してしまう部分はトリミングします。

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

object-fit: cover;の注意点

途切れても問題ない画像に使用する

ブログメディアのサムネ画像部分に用いる時は注意です。

例えば以下のブログカードは縦横比が崩れているので、

まさひろくん

脳死でobject-fit: cover;でおけ!!

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

と、こうすると、サムネ画像のテキストが一部途切れてしまいました。

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

だからといって、じゃあ画像が途切れないように縦横比を調節しても、余分な余白が発生します。

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】
補足:containについて

object-fit: contain; は、なるべく表示エリアいっぱいに画像全体を表示しようとする時に、足りない部分を余白にする

解決策は、入稿ルールを厳格に定めること

結局の所、トリミングされるとよくない画像入稿部分に関しては、ルールを厳格化し運用者に徹底させるしかありません。

さきほどの具体例で言えば、「横幅300px縦幅200px」なので、「横:縦=3:2」の比率の画像を使用するしかありません。

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】
このような画像なら、多少トリミングされても問題ないとは思いますが…
しょーご

ブログ箇所などは納品時に投稿・運用マニュアルを作成し、入稿画像のアスペクト比(縦横比)を指定して渡しておきましょう。

さいごに 画像の縦横比の崩れに敏感になろう

一番重要なのは、画像の縦横比の崩れに敏感になることかと思います。

例えば私が出している「【上級】デザインカンプからのコーディング実践演習」では企業メディアサイトを構築しますが、以下の画像部分は要注意です。

object-fitの使い方を解説【CSSで画像をトリミングし縦横比を固定できる】

こういったWordPressの投稿画面で画像が入稿される場所は、レスポンシブ時やデザインと違う画像が入稿された途端、縦横比が崩れたりしやすいですね。

画像実装の際は、今後別の画像に入れ替わったときも表示が崩れないようにコーディングするのが、大事。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!
});