search

Home  >  Q&A  >  body text

css - 手机端响应式布局时,图片设置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>

迷茫迷茫2871 days ago901

reply all(5)I'll reply

  • 怪我咯

    怪我咯2017-04-17 13:59:06

    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

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 13:59:06

    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

    reply
    0
  • 迷茫

    迷茫2017-04-17 13:59:06

    Why not use flex layout?

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-17 13:59:06

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

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 13:59:06

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

    Set img to:

    display:block;

    reply
    0
  • Cancelreply