1

我一直在寻找答案已经有一段时间了,并且正在修补它一段时间,但似乎找不到解决方案。可能这很容易,但我无法绕过它。

我在容器中得到了内联样式为“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/

4

2 回答 2

1

百分比宽度将子元素设置为其父元素宽度的百分比。在这种情况下,孩子是你img的,父母是你的.post分隔符。将图像的宽度设置为 44% 会将其设置为分隔线宽度的 44% - 这意味着无论您使用什么容器,图像将始终为其宽度的 44%。

解决这个问题的一种方法是给你的img100% 宽度和你的.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 示例

于 2013-03-27T15:41:36.190 回答
0

尝试这个:

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

img{ 
  vertical-align:bottom; 
  max-width:100%;
}
于 2013-03-27T15:25:12.463 回答