html - div をラップするか、流動的な絶対配置画像の上に配置します

Question

こんにちは — div を絶対位置の流動的な幅/高さの画像の周りにラップする (または配置する) 方法を知っている人はいますか? 私はそれを理解することはできません。

ありがとう、B.

<div class="wrap">
<img src="http://placekitten.com/g/500/500"/>
</div>

と...

img{
position:absolute; 
top:0; bottom:0; left:0; right:0;
max-width:100%; 
max-height:100%;
margin:auto;
}

.wrap{
border:5px solid red;
display:block;
}

ここにあります：http://jsfiddle.net/20owLkxy/1/

Answer 1

divはそこにある必要がありますか? 境界線だけが必要な場合は、div を完全に削除し、画像に境界線を設定します。

Answer 2

画像を流動的にしたい場合は、 を与える必要はありません。position:absolute私が共有したフィドルを参照してください

http://jsfiddle.net/20owLkxy/6/

ウィンドウのサイズを変更すると、結果がフィドルで表示されるように、流動的にしました。

Answer 3

1 つの解決策は、div 背景画像を使用することです。

<div class="image"></div>

...

div.image {
content:url(http://placekitten.com/g/300/300);
float:left;
}

div.image{
display:inline;
background:red;
border:5px solid green;
position:absolute; 
top:0; bottom:0; left:0; right:0;
max-width:100%; 
max-height:100%;
margin:auto;
}

ここにjsfiddleがあります — http://jsfiddle.net/2z2osu7r/