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

求解

<!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>

图片描述

css html

html5 sass

阅读 7.7k

6 个回答

得票最新

YGJ

23915

发布于
2016-10-25

✓ 已被采纳

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

PARADISELIN

23711424

发布于
2016-10-24

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

设置img为：

display:block;

万事如意

47145076

发布于
2017-07-08

没有设置display：block；时

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=no"/>
        <title></title>
        <style>
            body{
                margin: 0;
            }
            /*div{
                width: 375px;
                width: 750px;
                height: 100px;
                background: green;
            }*/
            img{width:200px; height:100px;}
            
        </style>
    </head>
    <body>
        <img src="375.jpg"/><img src="750.jpg"/>
        <div></div>
    </body>
</html>

图片描述

设置display：block；之后

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=no"/>
        <title></title>
        <style>
            body{
                margin: 0;
            }
            /*div{
                width: 375px;
                width: 750px;
                height: 100px;
                background: green;
            }*/
            img{width:200px; height:100px; display:block;}
            
        </style>
    </head>
    <body>
        <img src="375.jpg"/><img src="750.jpg"/>
        <div></div>
    </body>
</html>

图片描述