Question

我正在使用HTML和CSS制作网站，但我的背景图片没有响应对于像移动设备这样的小型设备，它不会调整大小，因为我减小了窗户的大小我的图像CSS代码是这样的：

DEFAULT

Answer 1

您需要查看使用media queries，它们在css中用于定义某些屏幕尺寸。我建议您在这里查看：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

我还建议让图片有多种尺寸，你不想将大图像压缩到移动尺寸的画布上，你应该将它们分成移动/平板/桌面

@media only screen and (max-width: 768px) {
/* For mobile phones: */
    body {
        background-image: url(mobile_image.jpg);
        background-size: cover;
        border-image-repeat: no-repeat;
    }
}

Answer 2

您可以根据浏览器窗口的大小使用相同的图像进行缩放：

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Answer 3

/ *当浏览器或屏幕尺寸低于767px * /

时使用

DataColumn

如何使背景图像响应移动设备

3 个答案: