简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css - 手机端响应式布局时，图片设置width=100%后，还有设置display：block才能实现自适应？
迷茫
迷茫 2017-04-17 13:57:06
0
5
829

求解

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

迷茫
迷茫

业精于勤，荒于嬉;行成于思，毁于随。

reply all(5)
刘奇
刘奇2017-04-17 13:59:06 5 floor

The

img tag is an inline element. Inline elements do not have width and height attributes, so naturally they cannot be set. It needs to be set to block before it can be set. However, the img tag is special. It is also called a replacement element like input. It has its own width and height. It is just for setting the width and height. It is not necessary to change the display to block. It’s just superfluous

Like +0
Add Reply
Peter_Zhu
Peter_Zhu2017-04-17 13:59:06 4 floor

Because the img tag is an inline element by default (it seems to be said so), that is, inline, setting the width of the inline element is invalid. After display: block; it is a block-level element. It is only valid if width is set

Like +0
Add Reply
迷茫
迷茫2017-04-17 13:59:06 3 floor

Why not use flex layout?

Like +0
Add Reply
大家讲道理
大家讲道理2017-04-17 13:59:06 2 floor

No need, just width=100%, that’s fine. The prerequisite is the mobile meta tag

Like +0
Add Reply
Peter_Zhu
Peter_Zhu2017-04-17 13:59:06 1 floor

Solving common problems with images---excessive white space at the bottom

Set img to:

display:block;

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！