Лазерные изображения искажаются при двойном касании или масштабировании масштабирования

Question

Я использую плагин Photoswipe Masonry Gallery (WP), но когда изображения имеют двойное нажатие или масштабирование, они искажаются.

Любая идея, что вызывает это? Это не проблема с плагинами, так как она отлично работает при переключении на тему Twenty Fifteen. FYI, я использую <meta name="viewport" content="width=device-width">. Что-нибудь подозрительное в нижеприведенном CSS, которое я использую?

@media screen and (max-width: 700px) { 
    /* basics */ 

    #content, 
    #sidebar, 
    .endbar_left, 
    .endbar_right { 
     float: none; 
     width: 100%; 
    } 
    #content { 
     margin-left: 0%; 
     padding-left: 0%; 
     padding-top: 20px; 
    } 
    html, 
    body { 
     width: auto !important; 
     overflow-x: hidden !important; 
    } 
    img { 
     border: none; 
     max-width: 100%; 
     height: auto; 
    } 
    #header { 
     padding-bottom: 0 !important; 
    } 
    /* posts */ 

    .inside2 { 
     padding: 0 10px 10px 10px; 
    } 
    .post { 
     padding-right: 3px; 
    } 
    .pics_article { 
     float: none; 
     margin-left: 0; 
    } 
} 

Заранее благодарю вас за помощь. FYI, я не веб-разработчик. Кто-то с хорошими знаниями html/css. Благодаря!

Answer 1

Только что нашел решение самостоятельно! Это было !important; в моих img свойствах (не в вышеупомянутом запросе @media, но в основной части CSS), вызывающем это искажение. Удаление !important; из приведенного ниже разрешило проблему.

img { 
    border: none; 
    max-width: 100% !important; 
    height: auto;}