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

概述我需要在div宽度内包装几个图像静态填充. Div必须水平居中.我需要它才能响应,即div的最大宽度(包括填充)必须设置为100％. <div class="content"> <img src="http://placehold.it/350x150"/> <br/> <img src="http://placehold.it/250x150"/></div> CSS： 我需要在div宽度内包装几个图像静态填充. div必须水平居中.我需要它才能响应,即div的最大宽度(包括填充)必须设置为100％.

<div >    <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中无法正常工作(缩小宽度时会裁剪图像).有人有解决方案吗？

解决方法 .content元素显示为内联块,因此其宽度取决于其子宽度.
在你的情况下,它的孩子要求350px,所以即使屏幕较小,它也总是有350px的宽度.

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

Demo with block

如果您希望您的.content元素仍显示为内联块元素,则可以添加proprety max-wIDth：100％.有了它,你告诉它永远不会有比它的父更大的宽度.

Demo with inline-block & max-width

这不完全是你想要的.默认的盒子模型表示视觉宽度是宽度,填充和边框的增加.在小屏幕上,.content元素的父元素宽度为自己的填充.
令人高兴的是,您可以更改box-sizing属性的箱型宽度.

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

干杯,托马斯.

总结

以上是内存溢出为你收集整理的html – inline-block max-width在firefox中不起作用全部内容，希望文章能够帮你解决html – inline-block max-width在firefox中不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。