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

html

2022.01.05 2019.02.01

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

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

html

<div class="box"><img src="example.jpg"></div>

1	<div class="box"><img src="example.jpg"></div>

css

.box{
	width:50%;
	height:400px;
	position: relative;
	overflow:hidden;
	
	
}
.box img{
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-width: inherit;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.box{

width:50%;

height:400px;

position: relative;

overflow:hidden;

}

.box img{

width: auto;

height: auto;

min-width: 100%;

min-height: 100%;

max-width: inherit;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

}

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

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

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

【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)

positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか？ ...