Hi all

Trying to make a relative container expand and contract depending on the image size.
Been at this for hours, not sure if its possible... hoping somebody can shed some light on the issue.

I have another CSS for mobile which changes #club-gallery width: 100%, 50% tablet etc.
The main issue is the height, things only work if I have a fixed value, even with the min-height below nothing changes. I'm stuck with the one height.

Code CSS:
#club-gallery {
        width:300px;
        min-height:186px;
        margin-bottom:10px;
        overflow:hidden;
        position: relative;
}
#club-gallery img {
        max-width:100%!important;
        height:auto!important;
}

I have also tried:
height: auto;
height: 100%;

#club-gallery just disappears

Code HTML4Strict:
<div id="club-gallery">
<img src="images/club.jpg" style="position: absolute; top: 0px; left: 0px; width: 300px; height: 186px;">
</div>

The inline styles are set from CSS/JS, this is part of a small gallery which changes depending on screen size.

Thanks, Barry