时间戳

首页 > 解决方案 > 在不同设备上显示背景图像

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

问题描述

在此处输入图像描述我只有一张图片，即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;
}

标签： css

解决方案

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

推荐阅读