我遇到了一个问题,经过多次谷歌搜索后我还没有找到答案。我有一个带有静态谷歌地图(大小 400x300(的基本网站,我使网站响应于 600px 的媒体查询。
<p>
<img id="karte" alt="Geolocation" src="http://maps.google.com/maps/api/staticmap?&size=400x300&sensor=false&maptype=roadmap&markers=color:green|label:B|Stuttgart&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 代码中是否缺少某些内容或静态图像的行为方式?
在 #karte 参见JSFIDDLE上使用width:100%
当您使用
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%
,这样它们就不会拉伸和看起来很尴尬,然后覆盖地图
1st:从标记中删除"size=400x300">
第二:然后编写媒体查询
替换媒体查询中的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;
}
}