我需要将几张图片放在一个带有固定内边距的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;
}
这个示例在Chrome和Safari中运行良好,但在Firefox中却不行(当缩小宽度时图像被裁剪)。有人有解决方案吗?
display: inline-block;
改为display: block;
。 - TylerH<br/>
标签来进行间距控制,这就是边距/填充的作用。 - Paulie_D<br/>
进行简化。原本图片应该包裹在<p>
标签中。 - maxime schoeni