Wrap div around or place over fluid absolute positioned image

Question

Hi — Anyone know how I can wrap a div around (or position it over) an absolute positioned fluid width/height image. I can't figure it out.

Thanks B.

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

and...

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;
}

Here's a: http://jsfiddle.net/20owLkxy/1/

Answer 1

Maybe doing something like this http://jsfiddle.net/20owLkxy/2/

The image will be absolutely positioned inside the wrap with relative position. The other thing you need to do is to give the wrap width and height :)

*{
    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;
    }

And if you want fluid image you don't need to position it absolute. Some css will do the trick.

Example 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 2

If you want to make your image fluid then no need to give it a position:absolute, please see the fiddle i have shared

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

I have made it fluid like when you resize your window you can see the result in fiddle.

Answer 3

Does the div need to be there? If you just want a border, remove the div entirely and set the border on the image.

Answer 4

One solution is to use div background image:

<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;
}

Here's a jsfiddle — http://jsfiddle.net/2z2osu7r/