图片的移动自动缩放

Question

我有一个基本的静态 S.P.A.在笔记本电脑上开发时，我已经按照自己想要的方式设计了样式。当我在移动视口上测试并向上或向下滚动图像/内容调整大小时。我相信这是内置在 chrome 移动浏览器中的，但我想知道是否有办法禁用或围绕它设置样式？一些内容部分使用完整的背景图像，顶部覆盖有文本。当用户滚动并且图像调整大小时，它将内容推送到下一部分而不是有一个干净的结束点。我知道这是可能的，因为我一直使用没有这个问题的移动页面。我只是不知道该怎么做。

    .landingImage {
    width: 100vw;
    height: 100vh;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6f/Black_gram.jpg');
    background-position: right;
    background-size: cover;
    margin-left: auto;
    margin-right: auto ;
    }

    .titleContainer {
    position: absolute;
    width: 85vw;
    height: 75vh;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid white;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 16vw;
    color: white;
    text-shadow: 1px 1px black;
    }

    .titleText {
    margin-top: 10px;
    margin-left: 10px;
      }

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <div class="landingImage">
    <div class="titleContainer">
        <h1 class="titleText">SHIFT<br>WORKS<br>BICYCLE<br>OPERATIONS</h1>
    </div>
</div>

Answer 1

我可以看到的一个问题是，landingImage 和 titleContainer div 的高度设置为相对于视口宽度，例如

.landingImage {
 ...
 height: 100vh;  
 ...
}  

这意味着如果视口是 400px 宽，.landingImage div 将是 400px 高，这可能还不够。

一种选择是在 CSS 中使用 @media 查询，并根据视口宽度优化这些 div 的高度。例如

@media screen and (max-width: 480px) {
 .landingImage {
     height: 200vh; 
   }     
}

另一种可能性是在您现有的 CSS 中添加规则，以便 div 不会缩小到某个最小值以下，例如

.landingImage {
  ...
  min-height: 800px  
  ...
}

您可以设置任意数量的@media 媒体声明并优化设置以匹配您页面的具体情况。

祝你好运！