用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; 
}