响应式背景图片

Question

好吧，这似乎是一个简单的问题，但我找不到合适的解决方案。我需要 responsive/fluid 图像，以便它们相对于视口大小进行缩放，但我还需要使用背景属性加载它们 css 以便我可以使用媒体查询选择性地加载不同版本。我如何实现两者？

编辑：

这是代码示例。目前图像没有显示，我假设是因为在父元素中没有建立固定的宽度或高度（超出宽度：100%）。父元素也需要 100% 宽度，以保持响应缩放。图片为 400px x 400px。

HTML

<div class="why-us"></div>

CSS

.why-us {
  background: url(../lemonsevens/img/img_2x.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

Answer 1

例子我有

<div id="image"> </div>

css class

#image{
 background:url("src_for_my_image");
 background-size:100%;
 background-repeat: no-repeat;
}

Answer 2

我不确定你想要什么，但我想是这样的：

根据 OP 评论编辑的代码段。

.bg-img {
  background: url(http://placehold.it/400x400) no-repeat 0 0 / 100% auto;
  height: 400px;
}

/*added based on OP comments*/

@media (max-width : 480px){
  .bg-img {
    background-size:contain
    }

<div class="bg-img">&nbsp;</div>

响应式背景图片

Responsive background-image

html

css

responsive-design