CSSで画像を縦・横フィット!「object-fit: cover」で自動トリミング|IE対応!

この記事は約3分で読めます。
広告

枠の中に画像を縦横ピッタリと収めたい時、横幅100%か、縦幅100%かを指定するけど、画面サイズによって縦か横の余白が空いちゃうから、メディアクエリで細かい指定しなくちゃいけなかったり色々手間が多いよね。

「object-fit: cover」なら、その面倒から解放されて画面サイズを変えても、イイ感じに両方フィットしてくれる。

言葉では分かりずらいのでデモで確認してみよう!

デモ

デモイメージ

デモでは、横300px、縦300pxに収まるようにイイ感じになるね!
CSSは下記になります。

CSS

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

CSSはimgに表示する縦横の「px」と「object-fit: cover」を指定したら完成!
画像比率がおかしくならずに、「overflow: hidden」も要らない。
でもピッタリと比率もちゃんとしててさらにトリミングもされてる!

超絶便利♪

自分は今まで知らなかったので、みんなも使う機会が有ったら一緒に使おう!
ちなみにブラウザの対応状況はこんな感じです。
IE以外の全ブラウザ対応なので使いやすい。
IEはもういいかもだけど場合によっては、まだまだ現役かもしれません。
なので、プラグインでIEでの表示もカバーしよう!

IEをカバーするプラグイン「object-fit-images」

GithubからプラグインをダウンロードするかCDNでリンクしてください!

HTMLにリンクを追加

  // ダウンロード
  <script src="/js/ofi.min.js"></script>
  // CDN
  <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>

プラグインの「object-fit-images」を利用するためにダウンロードまたは、CDNからのリンクのどちらかをHTMLに書こう。
そしたらjsでimgの処理をします。

jsファイルに記述を追加

  objectFitImages();

これだけでもいいんだけど、このままだと全ての画像に「object-fit-images」のプラグインを利用することになり処理が重たくなっちゃうから、「object-fit」を使う特定画像だけを指定する場合は次の書き方になります。

  objectFitImages('.first-img');

これで「.first-img」だけを処理することができます。
最後にCSSで特定の指定をしたら完了です。

CSSで記述

.first-img {
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

これでIEでも「object-fit: cover」が利用できるようになりました!
IEだけの為にってちょっと面倒だけどしょうがない場合もあります!

以上です。

SNSフォローボタン
エンデ・バタローをフォローする
CSSjavascript

東京に住み始めて7年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて7年目になります。
エディタはAtomからVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました