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

【问题标题】：Static google map image does not become fluid with media query静态谷歌地图图像不会随着媒体查询而变得流畅
【发布时间】：2017-08-30 17:46:32
【问题描述】：

我遇到了一个问题，经过多次谷歌搜索后我没有找到答案。我有一个带有静态谷歌地图（大小 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>

小提琴在这里：https://jsfiddle.net/bLahadgu/

当我将屏幕缩小到 600 像素时，图像之外的所有内容都变得流畅，但图像仅在 400 像素或更低时才变得流畅。如果我删除size=400x300&amp;，则根本不会出现该图像。我检查了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>，但在 600 像素处都变得流畅，只是不是图像。我的 CSS 代码中是否缺少某些内容或静态图像的行为方式？

【问题讨论】：

标签： jquery html css google-maps-api-3

【解决方案1】：

第一个：从标签中删除“size=400x300”

第二：然后编写媒体查询

【讨论】：

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

【解决方案2】：

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

当你使用时

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

#karte max-width 是第一个宽度集，即400px，这就是它不会拉伸超过 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%，这样它们就不会被拉伸和看起来很尴尬，然后为地图覆盖它

【讨论】：

【解决方案3】：

将您的媒体查询中的max-width 替换为width，然后您的图像映射将是响应式的。

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

【讨论】：