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

Question

我遇到了一个问题，经过多次谷歌搜索后我还没有找到答案。我有一个带有静态谷歌地图(大小 400x300)的基本网站，我使该网站响应 600 像素的媒体查询。

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

fiddle 在这里:https://jsfiddle.net/bLahadgu/

当我将屏幕缩小到 600 像素时，图像之外的所有内容都会变得流畅，但图像只会在 400 像素或更低时变得流畅。如果我删除 size=400x300&该图像根本没有出现。我检查了 CSS 代码，似乎没问题。

对于正常的屏幕尺寸

img, #karte{
    width:400px;
    height:300px;
}

对于小屏幕(在媒体查询内):

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

还确保支架、内容等也适应较小的屏幕:

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

我以为可能是 <p>但在 600px 时一切都变得流畅，而不是图像。我的 CSS 代码中是否缺少某些内容，或者静态图像的行为方式？

Answer 1

在#karte 上使用width:100% 参见jsfiddle

当你使用

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

#karte max-width是第一个设置的宽度，也就是400px，所以不会拉伸(stretch)超过400px；

所以在下面使用这个 css(用于媒体查询)

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

你应该为图像保留 max-width:100% 这样它们就不会拉伸(stretch)并且看起来很别扭，然后为 map 覆盖它