css - 如果 map 的高度较大，街景 View 无法正确显示图像

Question

我按照下面的方式使用过街景

/* Map html */
<div id="mapDiv" class="">
    <div id="map-holder">
    <div id="map_canvas" class="bigmap"></div>
    <div id="map_stv" class="minimap" style="display: none"></div>
    </div>
</div>

/* Css associated */
.bigmap{
    width:100%;
    height:100%;
}

.minimap{
    width:50%;
    height:100%;
}
#map_stv {
    position: absolute;
    top: 0;
    right: 0;
}
#map_stv img {
    border: none !important;
    max-width: none !important;
}

每当我需要显示街景时，我都会将迷你 map 类添加到 map_canvas 并切换 map_stv。它工作正常。但是本地图的尺寸​​为 768x1024 时，我会遇到以下问题

有没有人遇到过这个？有什么建议吗？

Answer 1

I made a fiddle for you!

问题是，您的 map 对于图像来说拉伸(stretch)得太远，因此街景图像的顶部被截断了。

为了使您的 map 具有响应性，我刚刚添加了:

style="width: 99%; height: 99%;

到你的#map-holder div。

总而言之，我最好的选择是尝试使用 map width 和 height 保持或多或少均匀的纵横比