在HTML中显示图像的问题

Question

在HTML中显示图像的问题

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>

           body, html {
              height: 100%;
              width: 100%;
           }

           .top {
               width: 800px;
               margin: 0 auto;
           }

           .topfixedimg{
                background-repeat: no-repeat;
                background-size: cover;
                background-image: url("image.jpg");
                background-position: center;
                background-attachment: fixed;
                width: 100%;
                height: 85%;
            }


        </style>
    </head>
    <body>
        <div class="top">
            <div class="topfixedimg"> </div>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果我没有在最外面的"top"div的CSS中添加height属性,则上面的代码片段不会显示图像.

如果我添加高度,则它会正确显示图像.

它是否应该从内部div元素的CSS获取高度并仍然显示图像,即使没有最外层div元素的CSS中的height属性？

Answer 1

meh*_*mpt 8

85%的高度意味着父母身高的85%.由于您没有为外部div指定任何高度,因此其高度为0px,因此0的85%为0.

指定父级的高度,或者在px,em,rem等中指定内部div的高度.

#outer {
width: 100px;
height: 100px;
background: red;
}

#inner {
width: 100px;
height: 50%;
background: green;
}

Run Code Online (Sandbox Code Playgroud)

<div id="outer">
  <div id="inner"></div>
  <span>I'm just another element</span>
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年前
查看次数：	62 次
最近记录：	8 年前