A simple (one might think!) question to all CSS gurus: I would like to shrink a DIV snugly around an IMG. The IMG is 600 x 800 and I needed it much smaller. So I go {height: 100%; width: auto;} and constrain the height via a wrapper DIV. However, to maintain the (unknown to me) AR, I cannot fix the width on the DIV. I tried to set the wrapping DIV to "display: inline-block" or "float: left" or "position: absolute" or ... - no matter: most browsers will stretch that DIV 800px wide - the original width of the full-size IMG - so it looks sthg like this:
[[IMG].............................]
Bizarrely, I can add some text to the DIV (just to test), and that text will actually appear right next to the scaled IMG:
[[IMG]Hello world..................]
Does anyone here know why the original size of the IMG matters (for dimensioning the width, it does not affect the height)? And what I might be able to do to shrink the DIV?
Thanks for looking.
EDIT: To test Pär Wieslander's idea, I wrote a little test bed that should help clarify what I am on about:
<style type="text/css">
html, body {
height: 100%;
}
#dialog {
background: green;
height: 50%;
position: relative;
}
#frame {
border: 2px solid black;
display: inline-block;
height: 100%;
position: absolute;
}
#img {
height: 100%;
width: auto;
}
</style>
<body>
<div id="dialog">
<div id="frame">
<img id='img' src='...' />
</div>
</div>
</body>
Just pick any large IMG of your choice. You should find an inexplicably wide frame around and image that has squeezed - height-wise - onto the green carpet.