いきなり真相に迫りますが、こんな現象に悩んでいませんか？
今回紹介するobject-fitを使用すれば、以下のように縦横比を直すことができます。
画像の縦横比がレスポンシブなどで崩れないようにしたい。
どんな縦横比の画像が入稿されても崩れないように自動トリミングしたい
こんなことを叶えてくれるCSS魔法のプロパティ、それがobject-fitです。
ついにIEが逝去されたことによって、思う存分活用できるようになりました。
しかし決して万能ではなくobject-fitの欠点もあるので、そこも踏まえて解説していきます。
object-fitには、cover、contain、fill、none、scale-down、unsetなどたくさんありますが、ほとんどcoverしか使わないので、object-fit: cover;の解説のみを行います。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
object-fitの使い所
object-fit: cover;の使い所は、大体カードコンポーネントの画像箇所です。
HTMLコーディングだけだと分かりにくいですが、WordPressだと特に「様々なリテラシーの人が画像を入稿する」可能性があります。
コーディング段階のデザインカンプで埋め込まれている画像はちょうどよい縦横比になっているかもです。
しかし、リリース後の実際の運用では、例えば以下のような様々な縦横比の画像が入稿される可能性があります。
試しに上記の画像を用いて、以下の縦幅横幅だけ指定したコードでカードコンポーネントを構築してみます。
<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;
}すると、画像が縦に潰れた表示になってしまいました。
これを避けるのはとても簡単です。img要素にobject-fit: cover;を追加すれば良いのです。
.image1 {
width: 100%;
height: 200px;
border-radius: 5px 5px 0 0;
object-fit: cover;
}
object-fit: cover;の仕組み
これは何が起きているのでしょうか。
簡単に言うと、background-size: coverと同様、表示エリアになるべく余白なく画像を表示しようとし、はみ出してしまう部分はトリミングします。
object-fit: cover;の注意点
途切れても問題ない画像に使用する
ブログメディアのサムネ画像部分に用いる時は注意です。
例えば以下のブログカードは縦横比が崩れているので、
脳死でobject-fit: cover;でおけ！！
と、こうすると、サムネ画像のテキストが一部途切れてしまいました。
だからといって、じゃあ画像が途切れないように縦横比を調節しても、余分な余白が発生します。
object-fit: contain; は、なるべく表示エリアいっぱいに画像全体を表示しようとする時に、足りない部分を余白にする
解決策は、入稿ルールを厳格に定めること
結局の所、トリミングされるとよくない画像入稿部分に関しては、ルールを厳格化し運用者に徹底させるしかありません。
さきほどの具体例で言えば、「横幅300px縦幅200px」なので、「横：縦＝３：２」の比率の画像を使用するしかありません。
ブログ箇所などは納品時に投稿・運用マニュアルを作成し、入稿画像のアスペクト比(縦横比)を指定して渡しておきましょう。
さいごに 画像の縦横比の崩れに敏感になろう
一番重要なのは、画像の縦横比の崩れに敏感になることかと思います。
例えば私が出している「【上級】デザインカンプからのコーディング実践演習」では企業メディアサイトを構築しますが、以下の画像部分は要注意です。
こういったWordPressの投稿画面で画像が入稿される場所は、レスポンシブ時やデザインと違う画像が入稿された途端、縦横比が崩れたりしやすいですね。
画像実装の際は、今後別の画像に入れ替わったときも表示が崩れないようにコーディングするのが、大事。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
