我对编程和尝试在移动设备上显示背景图像比较陌生。它似乎在移动横向上可以正常工作，但在移动纵向上却不行。它以纵向显示大约 1/3 的图像。我试过高度：100% 宽度：100%，背景位置：中心，背景尺寸：封面。我还尝试创建另一个宽度为 290 像素的图像，然后使用媒体查询来调用该图像。这些事情都没有奏效。任何帮助解决这个问题将不胜感激？
【问题讨论】：
标签： css mobile responsive-design
这是给你的另一个建议。
您尝试做的事情并不容易，因为您希望您的设计适用于所有视口或屏幕尺寸，同时，您还有一些应该始终可见的文本信息。
这里有一个建议：
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
背景大小不一定需要“包含”，我只是说明它可能与桌面设置不同。
祝你好运！
【讨论】：
预期的行为是什么？
background-size: contain;
在不裁剪或拉伸图像的情况下尽可能大地缩放图像。
background-size: cover;
在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会将其垂直或水平裁剪，以便不留空白。
（来自https://developer.mozilla.org/en-US/docs/Web/CSS/background-size）
如果要显示整个图像而不进行裁剪，则需要使用background-size: contain;。在纵向模式下，图像将不再填充整个背景，您可能还想添加background-repeat: no-repeat;。
【讨论】：