CSS div inline-block + img max-width

Question

我一直在寻找一段时间的答案现在&正在修补它一段时间，但似乎无法找到解决方案。 大概就像地狱一样简单，但是我无法把头围住它。

我已经将图像与包装在容器中的“最大宽度：44％”的内联样式相关联。

如何让容器与图像内部的图像具有相同的宽度？

<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; } 

这里的jsfiddle例如：http://jsfiddle.net/37Fyb/2/

Answer 1

试试这个：

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

img{ 
    vertical-align:bottom; 
    max-width:100%; 
} 

Answer 2

百分比宽度的子元素设置为其父的宽度的这一比例。在这种情况下，孩子是你的img，父母是你的.post分隔符。将图像的宽度设置为44％将其设置为分隔线宽度的44％ - 这意味着无论您对容器使用何种图像，图像的宽度始终为44％。要解决这个问题

一个办法是给你的img 100％的宽度和你.post分频器的44％的宽度，然后再包在固定宽度其它分割：

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。