Question

我在静态网页中显示背景图片时遇到问题。当我在不同的液晶显示屏上观看时显示不同的高度，我怎样才能确保高度调整到大约80％的面积，我甚至给出了高度的风格百分比，但它对我不起作用。

请参阅此图片以供参考：

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink- 
 to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bakheet Japan</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/full-width-pics.css" rel="stylesheet">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"> 
</script>


<style>
    .buttons a {
        font-size: 16px;
    }

        .buttons a:hover {
            cursor: pointer;
            font-size: 16px;
        }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background-color: dimgrey;
        color: white;
        text-align: center;
    }

    header.py-5 {
        width: 100%;
        display: block;
        width: auto;
        height: 450px !important;
    }
 </style>

 </head>
 <body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand " href="#"><h3>Bakheet Japan</h3></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
    data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- 
    expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <!--<div class="buttons">-->
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link button" href="index.html">
                        Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link button" href="Aboutus.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link button" 
    href="Services.html">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link button" 
    href="Contactus.html">Contact</a>
                </li>
            </ul>
            <!--</div>-->
        </div>
    </div>
</nav>

    <header class="py-5 bg-image-full" style="background- 
   image:url('css/arid- 
   barren-daylight-813873.jpg');">
    <img class="img-fluid d-block mx-auto" height="230" width="240" 
    src="css/41435f27-bfd3-452a-b442-f8c4ca429a55.png" alt="">
   </header>


<div id="div1" class="container" style="height:150px;">
    <h1>Welcome to Bakheet Japan</h1>

</div>


<div class="footer container">
    <p class="m-0 text-center text-white">Copyright &copy; Bakheet Japan 
2018</p>
</div>


</body>
</html>

Answer 1

刚刚为<header> 80vh（视口高度）

添加了高度

这意味着屏幕高度的80％。

＆＃13;

.buttons a {
  font-size: 16px;
}

.buttons a:hover {
  cursor: pointer;
  font-size: 16px;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: dimgrey;
  color: white;
  text-align: center;
}

header.py-5 {
  display: block;
  height: 80vh;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand " href="#">
      <h3>Bakheet Japan</h3>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <!--<div class="buttons">-->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link button" href="index.html">
                        Home
                        <span class="sr-only">(current)</span>
                    </a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Aboutus.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Services.html">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Contactus.html">Contact</a>
        </li>
      </ul>
      <!--</div>-->
    </div>
  </div>
</nav>

<header class="py-5 bg-image-full" style="background-image:url('https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285');">
  <img class="img-fluid d-block mx-auto" height="230" width="240" src="https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285" alt="">
</header>


<div id="div1" class="container" style="height:150px;">
  <h1>Welcome to Bakheet Japan</h1>

</div>


<div class="footer container">
  <p class="m-0 text-center text-white">Copyright &copy; Bakheet Japan 2018
  </p>
</div>

＆＃13;

Answer 2

height: 80vh;
background-image: url('image_path');
background-size: cover;

Answer 3

.buttons a {
  font-size: 16px;
}

.buttons a:hover {
  cursor: pointer;
  font-size: 16px;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: dimgrey;
  color: white;
  text-align: center;
}

header.py-5 {
  
display: block;
  height: 80vh;background-size: cover;
background-image:url('https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285');
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand " href="#">
      <h3>Bakheet Japan</h3>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <!--<div class="buttons">-->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link button" href="index.html">
                        Home
                        <span class="sr-only">(current)</span>
                    </a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Aboutus.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Services.html">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link button" href="Contactus.html">Contact</a>
        </li>
      </ul>
      <!--</div>-->
    </div>
  </div>
</nav>

<header class="py-5 bg-image-full" style="">
  <img class="img-fluid d-block mx-auto" height="230" width="240" src="https://s.ftcdn.net/v2013/pics/all/curated/zbtHtSM3SqutW5IEL9pfC28tJiUQYaRO_cover_1160.jpg?r=7841fb1f92b99194ca818d410cb09430731b6285" alt="">
</header>


<div id="div1" class="container" style="height:150px;">
  <h1>Welcome to Bakheet Japan</h1>

</div>


<div class="footer container">
  <p class="m-0 text-center text-white">Copyright &copy; Bakheet Japan 2018
  </p>
</div>

我对不重复图像进行了轻微更改

CSS图像重新对齐，不同的液晶/屏幕

3 个答案: