Question

<!doctype html>
<html>
   <head>
     <title>Satya</title>
     <meta charset="utf-8"/>
   </head>
   <body margin="0">
     <div class="topheader">
        <div class="banner">
           <img src="../img/header2.png" alt="header banner" width="100%" height="15%"/>
        </div>
    </div>
  </body>
</html>

我的错在哪里，我没有在页面的15％处获得横幅。我也试过外部样式表，但这也没有用。如果我从代码中删除doctype声明而不是绝对正常工作。

帮助我做对。

`

Answer 1

<img src="../img/header2.png" alt="header banner" style="width: 100%, height: 15%" />

width和height属性仅支持像素大小，而不支持百分比

Answer 2

您可以将html更改为此

<img src="../img/header2.png" alt="header banner" width="100%" style="height: 15vh"/>

或者如果您想使用％单位，请在单独的样式表中添加此CSS。

body, html, .banner, .topheader {
  height: 100%;
}

在第一个例子中，vh单位将高度设置为屏幕高度的15％。使用15％作为单位，将其设置为父容器的15％，但您的图像父级没有固定的高度，因此CSS不知道如何计算它。通过为元素的父元素提供固定的高度，可以使图像占据一定的高度。

如果是我，我会使用单独的样式表并添加：

.topheader img {
  height: 15vh;
}

小提琴：https://jsfiddle.net/9Lcn0wf4/

我的错在哪里

2 个答案: