Resize <img/> using absolute positioning

Question

div#ipsko changes width and height to satisfy absolute positioning. Why img#utas doesn't?

JSFiddle: http://jsfiddle.net/pejh7/1/

HTML code:

<div id="upsko">
    <img id="utas" src="http://kharg.czystybeton.pl/108.png" />
    <div id="ipsko"></div>
</div>

CSS code:

div#upsko {
    position: relative;
    top: 200px; left: 200px; width: 100px; height: 100px;
    background: rgba(255,0,0,0.5);
}

img#utas {
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
}

div#ipsko {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(0,255,0,0.5);
}

Solution 1

Put the img tag in a div, give the image 100% width and height, and then absolute position the container div, e.g.

HTML:

<div id="upsko">
    <div id="utas">
        <img src="http://kharg.czystybeton.pl/108.png" />
     </div>
    <div id="ipsko"></div>
</div>

CSS:

#upsko {
    position: relative;
    top: 200px; left: 200px; width: 100px; height: 100px;
    background: rgba(255,0,0,0.5);
}

#utas {
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
}
#utas img { height: 100%; width: 100%; }

#ipsko {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(0,255,0,0.5);
}

Fiddle

The issues you describe are cause by the image width being unspecified (as other answers have stated) unfortunately without stating a px value for the image size (or converting the top/left/bottom/right and height+width to %) there's no way around this without adding an extra div.

I know adding extra div's is generally considered bad practice, but when it gives you flexibility as above, I think it's generally fine to do.

Solution 2

see the the div "div#ipsko" does not has its own height and width so it inherit its parent height and width . But the image has its own height and width . so you have to specify the height and width of image to make in fit in the div.

img#utas {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
}

Comments

[Matt Gibson]

@SeanDunwoody Would you care to expand on that?

[Sean]

Sorry for being so brief. But in your fiddle, the image overflows the container to the right and bottom when it should in fact be 10px away from the container on every side

[Karol Maciaszek]

@MattGibson img#utas has calculated width/height: 100px/100px, while it should have 80px/80px.

[Sean]

@KarolMaciaszek exactly, the problem is that if you specify the width & height in px your code isn't flexible if you wish to change something

[Karol Maciaszek]

Thanks! Works as expected, but is there a reason why can't we position <img/> using absolute distances ?

[Matt Gibson]

Ah! Yes, okay, I see what you're saying. The reason it's expanding is that with 100%, the image height and width is set to 100% of the parent container. Annoyingly, setting to "auto" (which would work with a div) drops you back to the actual image size.

[Matt Gibson]

@SeanDunwoody I've updated with the best fix I can think of, but it means altering the markup.

[Sean]

See my added explanation, hopefully that helps, if not let me know and I'll try amending the explanation for you :)