Question

我正在尝试使用图像作为背景作为封面。但是图像显示不同的窗口大小。我试图在chrome上看开发工具。在我的图像上有曲线形状，对于更大的屏幕和移动设备，它看起来完全不同。

我想以相同的外观显示所有窗口大小的图像。这是我的css代码。

background-image:url(../wp-content/uploads/2018/06/footer-wave-img.png);
background-repeat: no-repeat;
background-size: cover ;
height:auto;

请告诉我我必须做什么。

Answer 1

对于我已经构建的几个网站，我已经使用了响应大background-image

    img   {   
        height: auto; 
        width: 100%;
        background-image: url(../wp-content/uploads/2018/06/footer-wave-img.png);
        background-position: 0%, 0%, 50%, 50%;
        background-size: auto, cover;
     }

Answer 2

您可以将background-size属性设置为"100% 100%"，这样可以使背景独立于设备的分辨率。但是，背景图像将拉伸以覆盖元素的整个内容区域。
这是fiddle。
如果您希望保持图像的比例相同，你也可以单独尝试background-size: 100%;。

响应式图片背景大小封面

2 个答案: