suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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>

迷茫迷茫2784 Tage vor883

Antworte allen(5)Ich werde antworten

  • 怪我咯

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

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

    Antwort
    0
  • 天蓬老师

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

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

    Antwort
    0
  • 迷茫

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

    为何不用flex布局呢?

    Antwort
    0
  • 大家讲道理

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

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

    Antwort
    0
  • 天蓬老师

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

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

    设置img为：

    display:block;

    Antwort
    0
  • StornierenAntwort