how to position absolute image inside div element

Question

I have an image with absolute position image inside div tag. What i want to resize the div tag according to image if i resize the browser. My code are here:-

CSS

#parent{
    width:225px;
    height:auto;
    position:relative;
    border:1px solid #000;
}

img{
    position:absolute;
}

HTML

<div id="parent">
    <img src="images/photo1.jpg" />
</div>

Actually div tag border doesn't containing an image which is absolute positioned. Please help.

How do you want the image to sit within the div? In the center? At some offset? Fill the div with the image? — Danield, May 22 '14 at 08:53
Also, are you *sure* you need to position the image with `position:absolute`? — Danield, May 22 '14 at 08:55
@Danield yes i need it coz i have a slider which have absolute positioned image. — Vipin, May 23 '14 at 21:02

b_uk_happy · Answer 1 · 2014-05-22T09:18:51.677

1

Your question is not well worded. But maybe you need something like this?:

#parent{
    width:100%;
    max-width:250px;
    height:auto;
    position:relative;
    border:1px solid #000;
}

img{
    max-width:100%;
}

are you sure you need it absolute?

edited May 22 '14 at 09:18

answered May 22 '14 at 08:59

b_uk_happy

478
4
13

how to position absolute image inside div element

1 Answers1