html - 手机横屏模式下div不调整

Question

我放了一张 100% 高度的背景照片。

当我用手机(或 Chrome/Firefox 控制台)横向打开网站时，图像背景没有占据所有空间。

在桌面模式和纵向位置的移动模式下它们都可以。只有 LANDSCAPE 才有问题。

我想在横向模式下，将内容设置为视口(viewport)。如何做到这一点？

移动设备:模式肖像，好的。

MOBILE:MODE LANDSCAPE，内容不适合主 div 并从中出来。

请在浏览器控制台中打开代码段。在横向模式下的单元模拟器中明白我的意思。

body, html {
  height:100%;
  padding:0;
  margin:0;

}
.block {
  height: 100%;
  width: 100%;
  text-align: center;
  background: black;

}

.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;      
}

.centered {
  margin-top: 10%;
  display: inline-block;
  vertical-align: middle;
  max-width: 500px; 
  background: white;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="block">
     
    <div class="centered">
    
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" class="img-responsive" id="img_logo">
 <p style="color: black"> <a style="font-size:35px;"> xxxxxx</a> <br><br>text text <br> address <br>  </p>      
   </div>
  </div> 

我尝试删除 .block:before 和:

@media(orientation: landscape){
  .background-image {
    min-height: 200%;
  }
}

但是，此效果不适用于移动模式。它适用于移动和桌面。我希望它仅适用于移动设备。

Answer 1

我不确定这是否是您要查找的内容，但您可以尝试将“.block”中的“height”更改为“min-height”

.block {
  min-height: 100%;
  width: 100%;
  text-align: center;
  background: black;
}

这将确保 .block div 的黑色背景一直持续到最后。