Question

我一直在寻找一段时间的答案＆amp;正在修补它一段时间但似乎无法找到解决方案。可能它很容易，但我无法绕过它。

我的图像内嵌样式为“max-width：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

百分比宽度将子元素设置为其父元素宽度的百分比。在这种情况下，孩子是您的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

Answer 2

试试这个：

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

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

CSS div inline-block + img max-width

2 个答案: