【html+css】imgタグで配置した画像をbackground-size:cover;と同じように表現する方法

html

imgタグで配置した画像をbackground-size:cover;と同じように扱いたいと感じることはよくあると思います。
とくに、レスポンシブコーディングが主流になってからは多いのではないでしょうか?

今回は、cssのみでそれを実現する方法です。

html

css

ベースになる.boxのheightは必須です。display: flex;などで横並びにする場合やtableタグ内であれば、高さを気にする必要はないです。むしろ横並びにする際にこの設定が必要になるケースが多いきがします。

imgの設定では、heigt、widhtともにミニマム値100%以上を確保することがポイントです。
transform: translate(-50%, -50%);でど真ん中に配置していますが、画像によってどこを基点にするかかえることもできます。

transformを使って中央配置する方法についてはこちらの記事も参考にしてみてください

404 NOT FOUND | WEBクリエイターの部屋
WEB制作の基礎から応用まで様々な話題