Question

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

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

当我将屏幕缩小到600px时，图像外部的所有内容都会变得流畅，但图像只会变为400px或更低的流体。如果我删除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，这就是为什么它不会超过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%，这样他们就不会伸展，看起来很尴尬，然后为地图覆盖

Answer 2

第一：删除＆＃34;尺寸= 400x300＆＃34;来自标签

第二：然后写媒体查询

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

使用媒体查询时，静态Google地图图片不会变得流畅

3 个答案: