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

2015-06-26 10:33:12 +08:00
 alsacegustav

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

http://i.imgur.com/hzPQcq3.gif

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

请问如何设置css

2118 次点击
所在节点    问与答
4 条回复
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;}也行

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/201312

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX