Html 移动设备上的背景图像太小。如何修复?

Html 移动设备上的背景图像太小。如何修复?,html,css,Html,Css,我有一个设置为100%宽度的div,带有背景图像(如下图所示,背景图像是手持设备的手),因此调整窗口大小也会调整背景图像的大小。我这样做的目的是让它始终延伸到整个屏幕,而不管您使用的是什么设备 在我用手机启动网站之前,这一切都很好。手机屏幕在水平方向上太小,会将背景图像缩小到屏幕底部的3个信息框div看起来被推开的程度,但它只是被拉起的背景图像: 有人知道我如何解决这个问题吗?我是否应该找到一种方法来定位infobox div,使其在屏幕变小时向上移动 如有任何建议,将不胜感激 它试图保持它

我有一个设置为100%宽度的div,带有背景图像(如下图所示,背景图像是手持设备的手),因此调整窗口大小也会调整背景图像的大小。我这样做的目的是让它始终延伸到整个屏幕,而不管您使用的是什么设备

在我用手机启动网站之前,这一切都很好。手机屏幕在水平方向上太小,会将背景图像缩小到屏幕底部的3个信息框div看起来被推开的程度,但它只是被拉起的背景图像:

有人知道我如何解决这个问题吗?我是否应该找到一种方法来定位infobox div,使其在屏幕变小时向上移动


如有任何建议,将不胜感激

它试图保持它的纵横比,你可以将高度设置为100%,让它破坏纵横比,或者只是淡出图像的底部,使其看起来融入。

它试图保持它的纵横比,您可以将高度设置为100%,让它破坏纵横比,或者只是淡出图像的底部,使其看起来融合在一起。

为了向后兼容,您可能需要为不同的平台使用不同的背景图像,否则请使用CSS3的
背景大小。有关详细信息,请参阅。

为了向后兼容,您可能需要为不同的平台使用不同的背景图像,否则请使用CSS3的
背景大小。有关详细信息,请参阅。

这不是编程问题。您要求我们为您做出设计决策。这不是编程问题。您要求我们为您做出设计决策。我绝对不想破坏图像的比例。元素的大小与背景图像的大小无关。我绝对不想破坏图像的比例。元素的大小与背景图像的大小无关。我目前正在使用
背景尺寸
。我将其宽度设置为100%,高度设置为自动。这就是移动设备上缩小它的原因,因为宽度相对较小。我是否应该找到一种方法来检测它何时在移动设备上打开并更改大小?您可能已经知道背景图像大小的父容器。应该设置父元素的大小。查看移动CSS的CSS
@media
@import
。我目前使用的是
背景大小
。我将其宽度设置为100%,高度设置为自动。这就是移动设备上缩小它的原因,因为宽度相对较小。我是否应该找到一种方法来检测它何时在移动设备上打开并更改大小?您可能已经知道背景图像大小的父容器。应该设置父元素的大小。查看移动CSS的CSS
@媒体
@导入