Question

我正在尝试为网站创建一个英雄形象，而且我在网站底部收到了一个随机白条。这是HTML

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: padding-box;
}

img {
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0px 0px;
}

＆＃13;

  <img src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg' />

＆＃13;

Answer 1

img元素默认为display:inline-block; vertical-align:baseline;

您看到的基线对齐方式。

所以display:block;或vertical-align:top;：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <link rel='stylesheet' type="text/css" href="styles.css"/>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
  <img style="display:block" src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg'/>
</body>
</html

＆＃13;

另一种选择 - 将图像设置为背景：

＆＃13;

    body {
      background: no-repeat url(https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg);
      background-size:cover;
    }

＆＃13;

    <body>test</body>

＆＃13;

无法移除英雄形象底部的白条

1 个答案: