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/

Any reason to position the image `absolute`ly? – Hashem Qolami Oct 15 '14 at 11:32 — Hashem Qolami, Oct 15 '14 at 11:32
I'm trying to keep the image height and width fluid. – boyce Oct 15 '14 at 11:37 — boyce, Oct 15 '14 at 11:37

score 1 · Answer 1 · answered Oct 15 '14 at 12:47

1

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

answered Oct 15 '14 at 12:47

Jon Packman

26
2

Yep — the div will have navigation inside it. – boyce Oct 15 '14 at 12:58

Bojan Petkovski · Answer 2 · 2014-10-15T11:43:15.167

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

Yeah, I see where you're going. But what I'm trying to achieve is a div wrapped (or positioned over) a horizontally and vertically fluid width and height image. — boyce, Oct 15 '14 at 12:00
Why don't you make the image as the background-image of that div? — Bojan Petkovski, Oct 15 '14 at 12:12

Chidi Mohsinali · Answer 3 · 2014-10-15T11:51:34.313

0

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.

edited Oct 15 '14 at 11:51

answered Oct 15 '14 at 11:45

Chidi Mohsinali

131
3

That method removes the fluid 'height'. – boyce Oct 15 '14 at 12:00

score 0 · Answer 4 · answered Oct 15 '14 at 19:51

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/

Wrap div around or place over fluid absolute positioned image

4 Answers4