Использование масштабирования только для определенного div

Question

У нас есть план места, когда на мобильных телефонах было бы удобно иметь функцию масштабирования только для setaplan. В тот момент, когда вы увеличиваете масштаб с помощью пинча на мобильном устройстве Andoid, он увеличится, но вы должны полностью ущипнуть, чтобы поддерживать отзывчивый вид страницы.

Вот пример из #seats DIV Я желаю, чтобы увеличить https://jsfiddle.net/ohaumyxj/

Является ли это то, что может быть достигнуто с простым CSS или же JQuery приходят в смесь здесь? Я ищу тип вещей, которые вы получаете с Картами Google на странице контактов сайта или, возможно, немного лучше с функцией масштабирования крана.

.container { 
 
    margin: 0 auto; 
 
} 
 
#bmessage { 
 
    padding: 1px 3px; 
 
    height: 20px; 
 
    font-size: 14px; 
 
    background: #ddf; 
 
    color: #080; 
 
    font-weight: bold; 
 
} 
 
#seats:before { 
 
    content: ''; 
 
    display: block; 
 
    padding: 50%; 
 
} 
 
#seats { 
 
    margin: 10px 0; 
 
    padding: 10px 0; 
 
    position: relative; 
 
    background-image: url(https://s21.postimg.org/qd8mqgh07/seatplan11.gif); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
} 
 
#seats div { 
 
    position: absolute; 
 
    width: 1.5%; 
 
    height: 1.5%; 
 
} 
 
#seats .green { 
 
    background: url('https://s12.postimg.org/93ugmrvb1/seatg.gif') no-repeat center; 
 
    background-size: cover; 
 
    margin:0 !important; 
 
}

<div id="theatre"> 
 
    <div class="container"> 
 
    <div id="bmessage">Select the seats that you need.</div> 
 
    <div id="seats"> 
 
     <div class="avail std green" si="332" title="Y1" style="top: 8.7%; left: 10.2%; border: none; margin: 3px 1px;"></div> 
 
     <div class="avail std green" si="333" title="Y2" style="top:8.7%; left:13%;"></div> 
 
     <div class="avail std green" si="334" title="Y3" style="top:8.7%; left:16.2%;"></div> 
 
     <div class="avail std green" si="335" title="Y4" style="top: 8.7%; left: 18.8%; border: none; margin: 3px 1px;"></div> 
 
     <div class="avail std green" si="336" title="Y5" style="top: 8.7%; left: 21.5%; border: none; margin: 3px 1px;"></div> 
 
     <div class="avail std green" si="337" title="Y6" style="top:8.7%; left:24.2%;"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Пожалуйста, обратитесь к fiddle

HTML

<div id="theatre" class="zoomViewport"> 
     <div class="container zoomContainer"> 
      <div id="bmessage">Select the seats that you need.</div> 
      <div id="seats" class="zoomTarget"> 
       <div class="avail std green" si="332" title="Y1" style="top: 8.7%; left: 10.2%; border: none; margin: 3px 1px;"></div> 
       <div class="avail std green" si="333" title="Y2" style="top:8.7%; left:13%;"></div> 
       <div class="avail std green" si="334" title="Y3" style="top:8.7%; left:16.2%;"></div> 
       <div class="avail std green" si="335" title="Y4" style="top: 8.7%; left: 18.8%; border: none; margin: 3px 1px;"></div> 
       <div class="avail std green" si="336" title="Y5" style="top: 8.7%; left: 21.5%; border: none; margin: 3px 1px;"></div> 
       <div class="avail std green" si="337" title="Y6" style="top:8.7%; left:24.2%;"></div> 
      </div> 
     </div> 
    </div> 

Jquery:

$(document).ready(function() { 
      $("#seats").click(function (evt) { 
       $(this).zoomTo({ targetsize: 0.75, duration: 600 }); 
       evt.stopPropagation(); 
      }); 
     }); 

Answer 2

Как это?

var zoomable = document.getElementById('seats'), 
    zX = 1; 
window.addEventListener('wheel', function (e) { 
    var dir; 
    if (!e.ctrlKey) { 
     return; 
    } 
    dir = (e.deltaY > 0) ? 0.1 : -0.1; 
    zX += dir; 
    zoomable.style.transform = 'scale(' + zX + ')'; 
    e.preventDefault(); 
    return; 
});