テクノロジー
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

テクノロジーカテゴリーの変更を依頼記事元:

www.webcreatorbox.com

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

669usersがブックマークコメント

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

669 users

www.webcreatorbox.com

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント66件

注目コメント
新着コメント

shintarowfreshエッジ頑張れよマジで。IEはもういいとしてもエッジよ。

2017/03/13リンク

その他

pokotanu便利なCSSを知るたびにIE/Edgeへのヘイトが増す。

2017/03/13リンク

その他

imaginarationEdge未対応で、お祭り会場から撤収ムード。

2017/03/13リンク

その他

nibushibuMSはもうブラウザ開発あきらめなよ…

2017/03/13リンク

その他

free_rider あっもしかして「font-family: 'object-fit: contain;'」でいける感じ？MSよく頑張ったじゃん！> MSはブラウザ作るのを自粛するべき。

2017/03/13リンク

その他

Kiikurage知らなかった。background-imageに詰め込むかflex-boxとoverflowで頑張ってた。

2017/03/13リンク

その他

securecatまーたEdge未対応問題か

2017/03/13リンク

その他

Mint0A0yamaバックエンド厨なので、ブラウザ依存あってユーザ毎に毎回処理が走るなら、（プロキシ）配信するときに画像変換 + キャッシュしてあげた方が健全なのでは…と思ったりする。実際うちの本番ではそうしてる。

2017/03/13リンク

その他

megazalrockブコメでEdgeキレるのは流石に御門違いでしょ。Web屋ならW3Cの勧告プロセスぐらい知ってどうぞ。／毎度現在のステータスを書かないこの類のサイトもいい加減にして欲しい。

2017/03/14リンク

その他

tonchixMSが対応しないのはCRだからでRECまでいくと対応早いらしい。

2017/03/13リンク

その他

joltkun“object-fit: cover;”

2022/12/13リンク

その他

netbusinessjouhou画像トリミング

2020/05/20リンク

その他

sachiko-kame画像をいい感じに

2020/01/28リンク

その他

azumakuniyuki画像を物理加工して縦横比を調整するのが面倒くさいと思って調べたら見つけた

2019/12/10リンク

その他

y_yamanashi“object-fit: cover;”

2018/04/13リンク

その他

hopekuson便利な時代になったもんやで…

2017/12/27リンク

その他

kathew画像の縦横に関するあらゆるニーズに応えてくれる。IE用のポリフィルもある。完璧か

2017/12/27リンク

その他

kanno_kannoobject-fitなんてあったのか

2017/11/14リンク

その他

idr_zz嗚呼object-fitよ。外接リサイズcoverが素晴らしすぎる！！ 1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー｜Webクリエイターボックス@webcreatorboxさんから

2017/08/01リンク

その他

baba40“object-fit: cover;”

2017/07/16リンク

その他

amautt

2017/03/29

その他

yasu-log［B!］1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

2017/03/16リンク

その他

htn_50koma1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが

2017/03/16リンク

その他

tailtame余白追加できるのか。切り抜きたくないときにいいな。IEはやめさせるように誘導するから…

2017/03/15リンク

その他

shinagakiなんで背景画像でできてたのに、普通の画像でもっと早くからできなかったんだろうな

2017/03/14リンク

その他

tomemo508日本だと IE・Edge でシェア約３割か。https://webrage.jp/techblog/pc_browser_share/

2017/03/14リンク

その他

sho_yamaneまたマイクロソフトかよー！！

その他

その他

その他

abiruybackgroundでも似たようなことができるのでよく使ってる。edge対応されたらこれに変えてもいいけど。

2017/03/14リンク

その他

ftmacchoマジか！

2017/03/14リンク

その他

miruto新しい便利なプロパティを知る度にブラウザの対応状況に絶望する日々を終わらせたい(´･∀･`)

2017/03/14リンク

その他

mad_scientist1急速に場を収束させるIEの圧倒的存在感に感服

2017/03/13リンク

その他

yoshi-naEdgeはIE兄さんリスペクトしなくていいんだぜ？

2017/03/13リンク

その他

adsty画像の縦横比を保ちつつトリミングする方法。

2017/03/13リンク

その他

b4takashiこれはお手軽で便利！と思ったらIEとEdgeに対応するために外部ファイル読み込みという面倒な手順が待っていたのでMSは滅ぼさねばならない

2017/03/13リンク

その他

sumithsonianさらにレスポンシブでも縦横比を維持するCSSを編み出しているのだが、いつか公開してみたい。（編み出したといっても既出CSSの組み合わせやけど）

2017/03/13リンク

その他

awajiislandまたしてもあやつのせいで余計な作業が、、(´・д・｀)

2017/03/13リンク

その他

ddt2000“object-fit”

2017/03/13リンク

その他

tonchixMSが対応しないのはCRだからでRECまでいくと対応早いらしい。

2017/03/13リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「1行追加でOK！CSS...」が注目されています。

気持ちをシェアしよう

ツイートする

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー画像の一覧を表示する時など...1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横 250px の正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; }CSS でこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。そこで