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

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

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

外枠の幅	300px
外枠の高さ	300px
画像の幅	100% 指定値 500px
画像の高さ	100% 指定値 500px
object-fit	none cover contain fill

まとめ

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