Html – CSS div inline-block + img max-width

csscss-positionhtml

I've been looking for answer for some time now & was tinkering with it for a while but cannot seem to find solution.
Probably it's easy as hell but I cannot wrap my head around it.

I'v got image with inline style of 'max-width:44%' wrapped in container.

How do I make container to be the same width as image inside it? 

<div class="post" >
<img src="http://placekitten.com/200/300" style="vertical-align:bottom; max-width:44%;"/>                                        
</div>

.post{position:relative; display:inline-block;  border: 1px solid lime; }

Here's jsfiddle example: http://jsfiddle.net/37Fyb/2/

Best Answer

A percentage width sets the child element to that percentage of the width of its parent. In this case, the child is your img and the parent is your .post divider. Setting the image's width to 44% sets it to 44% of the divider's width - meaning no matter what you to the container, the image will always be 44% of its width.

One way to get around this problem would be to give your img 100% width and your .post divider the 44% width, then wrap that in another divider with fixed width:

HTML

<div class="outerContainer">
    <div class="post" >
        <img src="..." style="... width:100%;" />                                        
    </div>
</div>

CSS

.outerContainer {
    width:202px;
}
.post{
    border: 1px solid lime;
    width:44%;
}

JSFiddle example.

Related Topic