响应式背景图像答案

【问题标题】：Responsive background-image响应式背景图像
【发布时间】：2015-01-14 10:57:59
【问题描述】：

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

编辑：

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

HTML

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

CSS

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

【问题讨论】：

任何通用示例都可以。

标签： html css responsive-design

【解决方案1】：

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

根据 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
    }

&lt;div class="bg-img"&gt;&amp;nbsp;&lt;/div&gt;

【讨论】：

谢谢，但我不需要背景图片来覆盖整个页面。这只是一张 400 像素 x 400 像素的图片。
这更近了，但现在它正在拉伸整个视口。
你能给我提一下你的作品吗？这样我可以更好地帮助你吗？
好的，这是一个粗略的例子：jsfiddle.net/jtkmjnmg 它现在基本上可以按照我的意愿工作，除了我希望图像随着屏幕宽度的减小而减小。因为它是居中的，所以直到视口非常小时才会发生这种情况。我想最好只使用 Foundation 或其他东西来使用列？
我认为这很好，我会更改小视口部分的填充，或者改为使用100% auto，我会再次为小视口更改contain，例如max-width: 480px。如果您希望我将此添加到我的答案中，请告诉我。

【解决方案2】：

示例我有

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

css类

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

【讨论】：

我在我的 OP 中添加了一个代码 sn-p。使用您的解决方案，我的图像不显示。