响应式图像背景尺寸封面答案

【问题标题】：responsive image background size cover响应式图像背景尺寸封面
【发布时间】：2018-11-14 06:25:27
【问题描述】：

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

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

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

请告诉我我必须做什么。

【问题讨论】：

没有图像很难回答这个问题，因为我只是假设您想要什么，但是您是否尝试过将背景图像居中？
不同，你的意思是像放大，缩小？请提供更多信息或提供 jsfiddle
这是我的网址：staging.accessar.co，请在页脚之前检查“创新思维”文本的背景图片
我没有做任何放大，缩小。我在 chrome 浏览器，开发者工具选项中检查了它们。

标签： css html responsive

【解决方案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;
     }

【讨论】：

【解决方案2】：

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

【讨论】：