我对编程相对较新，并试图在移动设备上显示背景图像。 它似乎在移动横向上工作正常，但在移动纵向上则不行。 它以纵向显示大约 1/3 的图像。 我试过高度：100%宽度：100%，背景位置：中心，背景尺寸：封面。 我还尝试创建另一个宽度为 290px 的图像，然后使用媒体查询来调用该图像。 这些都不起作用。 任何解决此问题的帮助将不胜感激？
这是给你的另一个建议。
您要做的事情并不容易，因为您希望您的设计适用于所有视口或屏幕尺寸，同时，您有一些应该始终可见的文本信息。
这里有一个建议给你：
https://codepen.io/panchroma/pen/Lmjwyv
重要的部分是：
(1)您想在文档头部添加视口元标记，这将阻止智能手机缩放内容以适应屏幕
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
有关视口元标记的更多信息，请单击此处
(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;
}
}
这是我正在考虑的一个例子
背景大小不一定需要"包含"，我只是说明它可能与桌面设置不同。
祝你好运！
预期的行为是什么？
background-size: contain;
在不裁剪或拉伸图像的情况下尽可能大地缩放图像。
background-size: cover;
在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会对其进行垂直或水平裁剪，以便不留空白。
(来自 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
如果要显示整个图像而不裁剪，则需要使用background-size: contain;.然后，图像将不再以纵向模式填充整个背景，您可能还想添加background-repeat: no-repeat;。