竖屏模式下Hero Image高度无法铺满视口问题求助

• 未重置页面默认样式：body自带默认margin值，导致容器无法完全贴合视口边缘，出现额外留白
• 竖屏模式下容器适配逻辑错误：仅为#container设置了height: 100vw，未匹配旋转后的宽度需求，且旋转后未调整定位原点和偏移量，导致容器无法铺满整个视口
• 竖屏下背景图样式冲突：重复声明的background: image-url("background.png") no-repeat覆盖了原有有效的背景图配置，且image-url是Sass专属语法，原生CSS无法识别，直接导致背景图加载失效；额外设置的fixed定位、层级和位移逻辑完全脱离父容器的旋转布局，导致背景与容器位置不匹配

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #container {
    display: block;
    width: 100vw;
    height: 100vh;
  }

  .hero-image {
    background-image: url("https://wallpaperaccess.com/full/81538.jpg");
    background-color: #cccccc;
    height: 100%;
    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 {
      width: 100vh;
      height: 100vw;
      -webkit-transform: rotate(90deg) translate(0, -100%);
      -moz-transform: rotate(90deg) translate(0, -100%);
      -o-transform: rotate(90deg) translate(0, -100%);
      -ms-transform: rotate(90deg) translate(0, -100%);
      transform: rotate(90deg) translate(0, -100%);
      transform-origin: top left;
    }
  }

  @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>

• 新增全局样式重置，消除浏览器默认边距的影响
• 统一将容器的宽高设置为视口对应尺寸，避免层级高度传递异常
• 调整竖屏模式下容器的旋转逻辑，设置旋转原点为左上角，旋转后补充Y轴负方向偏移，确保旋转后的容器刚好铺满整个竖屏视口
• 删除竖屏模式下.hero-image的冗余冲突样式，保留原本的背景图适配逻辑即可生效

内容的提问来源于stack exchange，提问作者TechDev