HTML&CSS

CSSでimg要素の大きさ調整とobject-fit属性のシミュレーター

CSSでimg要素の画像の大きさ調整をする際、どういう場合にどうなるのかをシミュレーションできるようにします。

img要素の大きさ調整とobject-fitシミュレーター

300px
300px

500px

500px
コンテナ有で大きさ調整確認用の画像

まとめ

正直、このページは色々試した結果ひとまずシンプルになりました(苦笑)
ニーズに応えたいので、こういうケースのシミュレーターが欲しいなどあれば問い合わせフォームからご連絡ください。

著者のイメージ画像

株式会社BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月に独立後、2024年4月に株式会社BringFlowerを設立。SEOコンサルを活動の軸に据えつつ、AIライティングツールの開発と運営を自ら行う。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。