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

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上发生的事情.

用块演示

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

具有内联块和最大宽度的演示

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

带有内联块,最大宽度和盒子大小的演示

干杯,
托马斯.