Jquery 静态谷歌地图图像不会随着媒体查询而变得流畅

我遇到了一个问题，在谷歌搜索了很多次之后，我还没有找到答案。我有一个带有静态谷歌地图（尺寸400x300）的基本网站，我用600px的媒体查询使该网站响应

<p>
<img id="karte" alt="Geolocation" src="http://maps.google.com/maps/api/staticmap?&amp;size=400x300&amp;sensor=false&amp;maptype=roadmap&amp;markers=color:green|label:B|Stuttgart&amp;markers=color:green|label:A|Hamburg">
</p>

对于小屏幕（在媒体查询中）：

还应确保支架、内容物等也可通过较小的屏幕进行调整：

@media all and (max-width: 600px){
    header, #content, #holder, section, nav, article, footer, .callout{
        clear: both;
        display: block;
        width: 100% ! important;
        float: none;
        margin: 0;
        padding: 0;
    }
}   

我想它可能是

，但在600px下都变成流体，而不是图像。

---

我的CSS代码中是否缺少某些东西，或者这就是静态图像的行为方式？

将媒体查询中的

max width

替换为

width

，然后图像映射将响应

@media all and (max-width: 600px) {
  img,
  #karte {
    max-width: 100% !important;
    height: auto;
    float: none;
    margin: 0;
  }
}

用于：

---

在卡丁车上使用

width:100%

当你使用

img,#karte { 
    max-width:100%!important;
}

#karte max width

是第一个宽度设置，即

400px

，这就是为什么它不会拉伸超过400px

因此，请使用下面的css（用于媒体查询）

您应该为图像保留

max width:100%

，这样它们就不会拉伸和看起来很尴尬，然后为地图覆盖它 从标签上删除“尺寸=400x300”

第二：

---

然后写媒体查询

当我删除大小时，图像不会显示从css添加宽度和高度，如：img{width:200px；height:300px；}如果我这样做，也会发生同样的情况。我有上面的解决方案，所以我很高兴，谢谢

@media all and (max-width: 600px) {
  img,
  #karte {
    max-width: 100% !important;
    height: auto;
    float: none;
    margin: 0;
  }
}

@media all and (max-width: 600px) {
  img,
  #karte {
    width: 100% !important;
    height: auto;
    float: none;
    margin: 0;
  }
}

img,#karte { 
    max-width:100%!important;
}

img,
#karte {
max-width: 100% !important;
height: auto;
float: none;
margin: 0;
}
#karte {
    width: 100% !important;
    max-width:none!important;
}