Question

好吧，似乎是一个简单的问题，但我找不到合适的解决方案。我需要响应/流畅的图像，以便它们相对于视口大小进行缩放，但我还需要使用background属性加载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评论编辑的片段。

＆＃13;

.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
    }

＆＃13;

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

＆＃13;

响应的背景图像

2 个答案: