Question

我对编程相对较新，并试图在移动设备上显示背景图像。它似乎在移动设备上运行正常，但在移动设备上却没有。它以纵向显示大约1/3的图像。我试过身高：100％宽度：100％，背景位置：中心，背景大小：封面。我还尝试创建另一个宽度为290像素的图像，然后使用媒体查询来调用该图像。这些都没有奏效。任何有助于解决这个问题的帮助都会非常感激吗？

Answer 1

预期的行为是什么？

<强> background-size: contain;

尽可能缩放图像，而不裁剪或拉伸图像。

<强> background-size: cover;

在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平裁剪，以便不留空的空间。

（来自https://developer.mozilla.org/en-US/docs/Web/CSS/background-size）

如果要显示整个图像而不进行裁剪，则需要使用background-size: contain;。然后，图像将不再以纵向模式填充整个背景，您可能还想添加background-repeat: no-repeat;。

Answer 2

这是给你的另一个建议。

您要做的事情并不容易，因为您希望自己的设计能够在所有视口或屏幕上工作，同时，您还有一些应始终可见的文字信息。

以下是您的一条建议：
https://codepen.io/panchroma/pen/Lmjwyv

重要的一点是：

（1）您想在文档的头部添加一个视口元标记，这将阻止智能手机缩放内容以适应屏幕

<head>  
...  
<meta name="viewport" content="width=device-width, initial-scale=1">  
...
</head>

More about viewport meta tags here

（2）将背景图像的位置更改为左下角，然后关键文本将保留在不同视口的视图中

background-image: url(images/ComingSoon.jpg);
...
 background-position:left bottom;  
...  
}

（3）在您开始的基础上，为移动设备创建第二个纵向格式背景图像，然后使用媒体查询在任何最适合您设计的视口下方显示它

@media  screen and (max-width: 600px) {
    /* Small screen, non-retina */
 .bgimg { 
   background-image:    url(images/ComingSoon_Small_Portrait.jpg); 
       background-size: contain;
  } 
}

Here's an example of what I'm thinking of

背景大小不一定需要包含＆＃39;，我只是说明它可能与桌面设置不同。

祝你好运！

在移动设备上以纵向格式显示背景图像时出现CSS问题

2 个答案: