jquery - 如何将 Google map 静态图像保持在流畅/响应式尺寸上

Question

我已经在谷歌上搜索了很多，但找不到任何明显的意见，

我需要将静态谷歌地图图像合并到 jQuery Mobile 项目中，以构建带有phonegap 的应用程序。 map 图像必须几乎完全填充视口(viewport)。问题是如何打开，因为它显然会在不同屏幕尺寸的不同设备上打开。我尝试过使用百分比方法，但这在这里肯定行不通。

我想获得一些指导，以尽可能简单的方式将谷歌地图静态图像的布局保持在流体布局中(如果可能的话，请这样做)。

谢谢

Answer 1

将您最初需要的最大图像大小加载到容器中，例如尺寸为 380 x 250

这将是position:relative于溢出隐藏和您需要的最大大小。

figre 
    {
        position:relative;
        width: 100%;
        overflow:hidden;
    }

然后使用顶部和左侧绝对定位将图像放置在容器内的中央。

例如

figure img
    {
        position: absolute;
        top: calc(50% - 125px);
        left: calc(50% - 190px);
        }