用css插入的响应式图像

Question

我遇到了我的一个joomla网站的问题。我正在使用sobi来显示购物中心内的商店地图。我想让这张地图反应灵敏。的问题是，此图是插入有CSS图像：

HTML：

<div id="system"> 
    <article class="item"> 
     <div class="content clearfix"> 
     <div id="plan-boutiques"> 
      <img src="..."></img> <!-- This is the points on the map not the map --> 
     </div> 
     </div> 
    </article> 
</div> 

CSS：

#plan-boutiques { 
    background: url(../images/rom/niveau.png) no-repeat; 
    position: relative; 
    display: block; 
    height: 374px; 
    width: 685px; 
    margin: 0 auto; 
    z-index: 1; 
} 

然后，当我改变宽度，图像被裁剪，而不是调整大小这将是如果我有一个img标签中的图像。我无法改变这一点，图像被添加到CSS。我希望有一种方法可以使其响应！

感谢

Answer 1

更改#plan-boutiques规则：

#plan-boutiques { 
    background: url(../images/rom/niveau.png) no-repeat top center/contain; 
    /* ... */ 
} 

Answer 2

为了响应不适用任何固定和高度。不需要应用宽度和高度。以这种方式使用此宽度和高度。

#plan-boutiques > img { 
    width: 100%; 
    height: auto; 
    max-width: 685px; 
    max-height: 374px; 
}