响应式布局，如何在移动设备上让图片 100%宽度

This topic created in 4002 days ago, the information mentioned may be changed or developed.

一个个人博客站点，用wordpress搭建的，在手机上看的时候文章内的图片跟文字一样有边距。
不过希望图片能够撑到100%的宽度，而文字不变，就像这样

现有的 img 设置是
height:auto;
width:100%;

请问如何设置css

4 replies • 2015-06-28 02:36:51 +08:00

ccccccc

Jun 26, 2015

img {
max-width: 100%;
display: block; /* 这个加上好一些 */
height: auto;
}
文字: 加左右 padding

liyer

Jun 26, 2015

最外层容器不能有padding
每个区块分别设置padding
然后参照1楼的css就可以了

luckylion

Jun 28, 2015

<div class="box">1234567<div class="img_box"><img src=""></div>7890</div>
.box{padding:0 100px;}
.img_box{margin:0 -100px;}
img{width:100%;}

luckylion

Jun 28, 2015

其实直接img{width:100%;margin:0 -100px;}也行