双击或缩放时灯箱图像会变形

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