纵向查看时，主图不是全高

Question

嗨，我在 html 中创建了一个英雄形象。然而，背景在横向模式下是完整的，但在纵向模式下，背景图像不是全高。我想在纵向观看时使其全高。有人可以帮我吗？谢谢。

这是代码：

<style>
  #container {
    display: block;
  }

  .hero-image {
    background-image: url("https://wallpaperaccess.com/full/81538.jpg");
    background-color: #cccccc;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
  }

  @media only screen and (orientation: portrait) {
    #container {
      height: 100vw;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .hero-image {
      background-image: url("https://wallpaperaccess.com/full/81538.jpg");

      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background: image-url("background.png") no-repeat;
      background-size: cover;
    }
  }

  @media only screen and (orientation: landscape) {
    #container {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
</style>

<body>
  <div id="container">
    <div class="hero-image">
      <div class="hero-text"><br />Welcome<br /></div>
    </div>
  </div>
</body>

可以在这里访问代码：

https://codesandbox.io/s/bold-fire-3qj09?file=/index.html:0-1613&resolutionWidth=320&resolutionHeight=675

Answer 1

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <style>
  #container {
    display: block;
  }

  .hero-image {
    background-image: url("https://wallpaperaccess.com/full/81538.jpg");
    background-color: #cccccc;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
  }

  @media only screen and (orientation: portrait) {
    #container {
      height: 100vh;
      /*-webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);*/
    }

    .hero-image {
      background-image: url("https://wallpaperaccess.com/full/81538.jpg");

      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: 100vh;
      z-index: -100;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background: image-url("background.png") no-repeat;
      background-size: cover;
    }
  }

  @media only screen and (orientation: landscape) {
    #container {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
</style>

<body>
  <div id="container">
    <div class="hero-image">
      <div class="hero-text"><br />Welcome<br /></div>
    </div>
  </div>
</body>
</html>

你的代码只有两个错误我解决了。检查一下

纵向查看时，主图不是全高

Hero image not full height when viewing in portrait

css

responsive-design

responsive