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

发布于 2022-09-04 01:29:52 字数 611 浏览 8 评论 0

求解

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

图片描述

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怪异←思 2022-09-11 01:29:52

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

回复收藏 0

女尤 2022-09-11 01:29:52

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

设置img为：

display:block;

回复收藏 0

浅暮の光 2022-09-11 01:29:52

没有设置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>

图片描述