在不同设备上显示背景图像

Question

我只有一张图片是https://dummyimage.com/fullbanner。以下是要求。

https://jsfiddle.net/moorthy/ygn0Ldbw/1/

1) 我想在页脚中以 100% 的宽度重复背景图像。

2) 我想根据浏览器宽度和设备宽度为不同设备显示没有剪切/裁剪的图像。

我已尝试使用以下代码和具有不同像素的不同媒体查询来实现此目的，但我无法获得所需的结果。对于某些像素，在调整浏览器大小期间，图像的某些部分会被裁剪。

我尝试使用媒体查询 320,480,600,768,900,1024,1200 .. px，但没有正确覆盖所有 px 的背景图像。

是否可以在不同的设备上正确显示相同的图像？我尝试使用具有不同值的背景大小，例如覆盖和包含，但它没有正常工作。

例如

<div id="container">
    <div id="myPattern"></div>
</div>

#container{
    width:100%;
    height:71px;
    background-color:black;
    left: 0;
    bottom: 0;
    position : fixed;
}

#myPattern
{
    height: 100%;
    background-image: url("https://dummyimage.com/fullbanner");
    background-repeat: repeat-x;
    background-size: auto;
    background-position: left;
}

Answer 1

您应该使用background-size: contain; 而不是auto