Отзывчивое изображение вставлено 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; 
}