Question

我需要在div宽度内包装几个图像静态填充。 Div必须水平居中。我需要它才能响应，即div的最大宽度（包括填充）必须设置为100％。

<div class="content">
    <img src="http://placehold.it/350x150"/>
    <br/>
    <img src="http://placehold.it/250x150"/>
</div>

的CSS：

body {
    text-align:center;
}
.content {
    padding:20px;
    background-color:red;
    display:inline-block;
}
img {
    max-width:100%;
    height:auto;
}

（http://jsfiddle.net/Nu8nV/）

此示例在Chrome和Safari中正常工作，但在Firefox中无法正常工作（缩小宽度时会裁剪图像）。有人有解决方案吗？

Answer 1

.content元素显示为inline-block，因此其宽度取决于其子宽度在你的情况下，它的孩子要求350px，所以即使屏幕较小，它也总是有350px的宽度。

如果它是块元素，则其宽度将是其父元素的宽度。因此，当屏幕上没有足够的空间时，图像将被调整大小。这就是Chrome上发生的事情。

Demo with block

如果您希望.content元素仍显示为inline-block元素，则可以添加属性max-width: 100%。有了它，你就会告诉它永远不会有比它的父亲更大的宽度。

Demo with inline-block & max-width

这不完全是你想要的。默认的框模型表示视觉宽度是width，padding和border的加法。在小屏幕上，.content元素具有其父级的宽度+自己的填充令人高兴的是，您可以将框模型宽度更改为box-sizing属性。

Demo with inline-block, max-width, and box-sizing

干杯，
托马斯。

inline-block max-width在firefox中不起作用

1 个答案: