手机端响应式布局时，图片设置width=100%后，还有设置display：block才能实现自适应 - whatsns开源问答社区

手机端响应式布局时，图片设置width=100%后，还有设置display：block才能实现自适应财富值18

2016-10-25 10:24发布

2474 7

求解

<!DOCTYPE html> <html lang="zh-cn"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">     <title>移动端</title>     <style>         img {display: block; max-width: 100%; }     </style> </head> <body>      <img src="img/tour1.jpg" alt="">  </body> </html>

7条回答

未来警官 - 这个人很懒，什么都没留下

1楼 · 2016-10-25 11:18.采纳回答

display:block;

小米哥哥2 - 这个人很懒，什么都没留下

2楼-- · 2016-10-25 11:01

不需要啊，直接width=100%，就可以呀，前提要有移动端的 meta 标签

爱华645603290 - 这个人很懒，什么都没留下

3楼-- · 2016-10-25 11:07

img标签是行内元素，行内元素是没有width和height属性，自然无法设置。需要设置成block，才可以设置。但是img标签比较特殊，跟input又叫替换元素，自身就有width和height，所有只是为了设置width和height，改变display为block是没有必要的。画蛇添足而已

问尽天下车 - 这个人很懒，什么都没留下

4楼-- · 2016-10-25 11:14

为何不用flex布局呢?

pangxiediyiren - 这个人很懒，什么都没留下

5楼-- · 2016-10-25 11:17

解决图片常见问题---底部多余留白

360U2753326108 - 这个人很懒，什么都没留下

6楼-- · 2016-10-25 11:09

因为img标签默认是行内元素（好像是这么说的），也就是inline，行内元素设置宽度是无效的，display: block; 之后为块级元素。设置了width才有效

请喊我Da兄弟 - 这个人很懒，什么都没留下

7楼-- · 2016-10-25 11:18

设置img为：

一周热门更多>

相关问题