<img>要素を親要素いっぱいに広げて表示するにはどうしたらよいでしょうか？

Question

<img>要素を親要素いっぱいに広げて表示するにはどうしたらよいでしょうか？

イメージとして背景画像のbackground-size:contain;的な感じです。

親要素は正方形の領域で画面サイズに合わせて可変的にサイズが変わります。
画像は縦長もあれば横長もあります。
よろしくお願いします。

Answer 1

<div class="contain"><img src="https://placehold.jp/24/cc9999/993333/350x150.png" alt="横長"></div>
<div class="contain"><img src="https://placehold.jp/24/99cc99/339933/150x350.png" alt="縦長"></div>

.contain {
	height: 300px;
	margin: 30px;
	overflow: hidden;
	position: relative;
	width: 300px;
}
.contain > img {
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
```**動くサンプル：**[https://jsfiddle.net/fufozz8x/1/](https://jsfiddle.net/fufozz8x/1/)


---

**追記：**



**動くサンプル：**[https://jsfiddle.net/fufozz8x/2/](https://jsfiddle.net/fufozz8x/2/)

Comments

[D.O]

解答ありがとうございます。

この方法はどちらかというと
背景でいうなら
background-size:cover;的な感じかと思います。

「領域いっぱいに広がってくれる」という表現がよくなかったですね。紛らわしくてすみません。
画像がはみ出さないように親要素内に出来るだけ大きく表示するといういことです。
縦長の画像であればhightが100%，横長の画像であればwidthが100%
しかも親要素は画面の横幅に合わせて伸縮する正方形の領域というイメージです。

分かりにくくてすみません。

[kei344]

ああ、coverと勘違いしました。すいません。

Answer 2

<div class="contain img-h"><img src="01.jpg" alt="横長" width="277" height="156"></div>
<div class="contain img-v"><img src="02.jpg" alt="縦長" width="156" height="277"></div>

/*可変幅の親要素*/
.contain {
	position: relative;
	width: 30%;
	margin: 20px;
	border: 5px solid #ccc;
}
/*可変幅の親要素の領域を正方形に保つ*/
.contain:before {
	content: "";
	display: block;
	padding-top: 100%;
}
/*画像を親要素の中央に配置*/
.contain img {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
/*横長画像の場合*/
.contain.img-h img {
	width: 100%;
	height: auto;
}
/*縦長画像の場合*/
.contain.img-v img {
	width: auto;
	height: 100%;
}

静的に作るならこんな感じでしょうか。
親要素が可変幅で画像自身のサイズよりも大きくなった場合でも、
画像自身の比率を保ったまま親要素の中で拡大します。

中身の画像が縦長か横長かによってwidthとheightの値を変える必要があるので、
手動でclassを付けられない場合には画像の比率をJavaScriptで計算し、
動的にclassをつけてやる必要があります。