Оберните div вокруг или поместите поверх изображения с абсолютным позиционированием

Question

Привет - Кто-нибудь знает, как я могу обернуть div вокруг (или позиционировать его) абсолютно позиционированного изображения ширины / высоты жидкости. Я не могу понять это.

Спасибо Б.

<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

Одним из решений является использование фонового изображения 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/

Answer 3

Может быть, делать что-то вроде этого http://jsfiddle.net/20owLkxy/2/

Изображение будет абсолютно позиционировано внутри обертки с относительным положением. Другая вещь, которую вам нужно сделать, это указать ширину и высоту обтекания:)

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

.wrap{
    width: 100%;
    height: 100%;
    border:5px solid red;
    display:block;
    position: relative;
    }

И если вы хотите плавное изображение, вам не нужно позиционировать его как абсолютное. Некоторые CSS сделают свое дело.

Пример http://jsfiddle.net/20owLkxy/4/

* {
    margin: 0px;
}
body, html {
    height: 100%;
}
img {
    max-width:100%;
    height:auto;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
.wrap {
    width: 100%;
    height: auto;
    border:5px solid red;
    display:block;
    position: relative;
}

Answer 4

Если вы хотите, чтобы ваше изображение было плавным, вам не нужно position:absoluteпожалуйста, посмотрите на скрипку, которой я поделился

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

Я сделал его плавным, как когда вы изменяете размер окна, вы можете увидеть результат в скрипке.