【CSSだけ】画像の縦横比を維持したまま長辺に合わせてトリミング

Webサイト納品後って、クライアントがお知らせ記事を投稿することがほぼほぼですよね。
わざわざサムネイル画像のサイズを指定してクライアントに説明するのはお互いに面倒なこと。。
指定のサイズでなければ、アーカイブページに表示されるサムネのバランスがおかしくなるなんてこともしばしば。

実際に、筆者はクライアントとこんなやりとりをしたことがあります。

さとみ

サイトが完成しました!
記事の投稿は、サムネイル画像を○px×○pxで登録してください。

クライアント

あ、はい。(手間ァ)

3年間はこの状況が続いていましたが、そんな手間を解決してくれるCSSプロパティと出会い、コーディングも操作説明も超効率的になりました

今からその方法を解説しますので、ぜひご一読ください^^

目次

【結論】使用するプロパティは2つ

それは、object-fitaspect-ratioです!

サンプルコード▼▼

<div class="example">
  <img src="/img/sample.jpg" alt="サンプル" width="400" height="300">
</div>
.example img {
  object-fit: cover; /* 縦横比を維持したまま、短辺を基準にして自動的に拡大・縮小 */
  aspect-ratio: 3 / 4; /* ここにアスペクト比 */
}

画像を開発者ツール([F12])で選択いただくとソースコードを確認できます。

デモ

画像をトリミングするCSSプロパティ「object-fit」

object-fitは、widthとheightに合わせて画像をトリミングすることができるプロパティです
値にcoverを指定すると、中央を軸に親要素のボックスに合わせて隙間なく拡大してくれます
はみ出た部分はトリミングしてくれる優れものです!

ただし、サイズも設定しないと効きません
通常であればwidthheightですが、その代用が後述のaspect-ratioというわけです。

それぞれの値の効果

下記にサンプル付きで各値の動作を説明いたします▼▼▼
アスペクト比に対してトリミングの変化がわかりやすいよう、背景にグレーを敷いておきますね。

cover

縦横比を維持したまま、短辺を基準にして自動的に拡大・縮小

デモ

contain

縦横比を維持したまま、長辺を基準にして自動的に拡大・縮小

デモ

fill

縦横比を無視し、親要素のボックス全体を埋める

デモ

none

拡大縮小されない

デモ

scale-down

none と contain のうち、小さい方のサイズに合わせて表示します。

デモ

対応ブラウザ

嬉しいことに、すべての主要ブラウザでサポートされております!

画像の縦横比を保ってくれるCSSプロパティ「aspect-ratio

サンプルコード▼▼

<div class="example">
  aspect-ratio: 2 / 1;のボックス
</div>
.example {
  aspect-ratio: 2 / 1;
  width: 60rem;
  max-width: 100%;

  /*以下、装飾のためのCSS*/
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

画面幅を縮小すると動作を確認できます。

aspect-ratio: 1 / 2;
のボックス

aspect-ratioは、縦横比を保ったままコンテンツをレスポンシブしてくれるプロパティです。
(縦横比のことを「アスペクト比」とも言いますが、筆者は横文字が苦手なので普段は「縦横比」と言ってます。)

padding-topを指定する方法もあるのですが、計算が面倒だったり小数点がすごいことになったりするので、今回の方法をおすすめします。

著者が使用しているアスペクト比の計算サイトはこちら▼

上記サイトに縦サイズ・横サイズを入力すれば、縦横比を導き出してくれます。

その数値をaspect-ratio: 縦の数値 / 横の数値;と入れればOK!
ページ一番上の結論では画像にaspect-ratioを指定しておりますが、下記デモでは親ボックスに指定しております。

また、width数値指定しておくことをお忘れなく

「なぜ画像に指定するのがheightではなくaspect-ratioなの?」と思うかたがいらっしゃるかもしれません。

それは、heightレスポンシブが効かないからです。

%だと親ボックスの高さから算出されるし、vhだとデバイスごとに差が出てうまく可変されないため、aspect-ratioが簡単かつおすすめというわけです。

aspect-ratioが効かなかったら?

原因はこんな感じ。

  • widthheightの両方に数値が指定されている
  • <img>タグにwidth属性・height属性が指定されている
  • aspect-ratio: ○ / ○;の「/(スラッシュ)」が「:(コロン)」になっている(例:「aspect-ratio: 3 : 4;」)

もし効かないときは、下記をお試しください!

チェック項目
  • widthheightのどちらかの値をautoあるいはfit-contentにする
  • widthheightのどちらかに数値を指定する(属性での指定でも◎)
  • aspect-ratio: ○ / ○;の「/(スラッシュ)」が「:(コロン)」になっていないか確認

対応ブラウザ

object-fit同様、すべての主要ブラウザでサポートされております!

まとめ

いかがでしたでしょうか?

この方法ならば、WordPressでアイキャッチ画像を登録することに対する懸念が一つ減るかと思います。

進化し続ける時代とCSSに感謝!

  • URLをコピーしました!
目次