[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

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

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

エントリーの編集

loading...

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

タイトルガイドライン

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

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

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

Twitterで共有

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

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

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

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

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

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

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

ユーザー登録

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

記事へのコメント66件

  • 注目コメント
  • 新着コメント
shintarowfresh
エッジ頑張れよマジで。IEはもういいとしてもエッジよ。

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

その他
imaginaration
Edge未対応で、お祭り会場から撤収ムード。

その他
nibushibu
MSはもうブラウザ開発あきらめなよ...

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

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

その他
securecat
まーたEdge未対応問題か

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

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

その他
tonchix
MSが対応しないのはCRだからでRECまでいくと対応早いらしい。

その他
joltkun
"object-fit: cover;"

その他
netbusinessjouhou
画像トリミング

その他
sachiko-kame
画像をいい感じに

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

その他
y_yamanashi
"object-fit: cover;"

その他
hopekuson
便利な時代になったもんやで...

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

その他
kanno_kanno
object-fitなんてあったのか

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

その他
baba40
"object-fit: cover;"

その他
amautt

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

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

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

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

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

その他
sho_yamane
またマイクロソフトかよー!!

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

2017年03月14日 リンク

その他
junk-boy

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

その他
ftmaccho
マジか!

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

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

その他
yoshi-na
EdgeはIE兄さんリスペクトしなくていいんだぜ?

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

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

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

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

その他
ddt2000
"object-fit"

その他
tonchix
tonchix MSが対応しないのは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 でこのように画像に対してサイズを指定すると... こんな感じでグチャッとつぶれて表示されちゃいます...。 そこで

ブックマークしたユーザー

  • takao_woven2024年11月12日 takao_woven
  • ryoraspp2024年04月23日 ryoraspp
  • dorami4292023年01月10日 dorami429
  • joltkun2022年12月13日 joltkun
  • dynamicsoar2022年09月15日 dynamicsoar
  • yamasta2022年05月27日 yamasta
  • cyar2021年12月22日 cyar
  • footballnoaka2021年12月15日 footballnoaka
  • mtoy2021年01月20日 mtoy
  • capybaraww2020年10月13日 capybaraww
  • hg_kosuke2020年09月13日 hg_kosuke
  • netbusinessjouhou2020年05月20日 netbusinessjouhou
  • taxytaxy2020年03月24日 taxytaxy
  • norapodpro2020年03月11日 norapodpro
  • islandk2020年02月17日 islandk
  • sachiko-kame2020年01月28日 sachiko-kame
  • phista2020年01月20日 phista
  • microgravity2019年12月23日 microgravity
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /