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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3449 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

请问如何设置css

4 条回复 • 2015-06-28 02:36:51 +08:00

ccccccc

2015-06-26 11:08:33 +08:00

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

liyer

2015-06-26 11:36:30 +08:00

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

luckylion

2015-06-28 02:35:14 +08:00

<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

2015-06-28 02:36:51 +08:00

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