雙擊或縮放時燈箱圖像會變形

Question

我使用Photoswipe Masonry Gallery插件（WP），但當圖像被雙擊或縮放時，它們會變形。

任何想法是什麼造成這種情況？這不是一個插件問題，因爲它切換到Twenty Fifteen主題時可以很好地工作。僅供參考，我使用<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; 
    } 
} 

非常感謝您的幫助。僅供參考，我不是Web開發人員。有人有好的HTML/CSS知識。謝謝！

Answer 1

剛剛發現我自己的解決方案！在我的img屬性中（不是在上面發佈的@media查詢中，而是在CSS的主要部分中），導致此失真爲!important;。從下面刪除!important;已解決問題。

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