Javascript 将谷歌地图高度设置为图像高度

在每一页的顶部，我都有一个横幅。横幅是1980px乘657px

HTML:

因此，高度取决于图像和视口大小

在我的联系人页面上，我想要一张谷歌地图而不是横幅。我的问题是，我希望它与横幅的高度相同。我希望我可以在#map div中放置一个透明的横幅，但是添加到#map div的任何类或内容都会消失

有没有办法用CSS或JS实现这一点

使用Empi的答案，我想出了以下解决方案：

HTML:

JS:

---

这有点老套，但很管用。

为什么不直接将

#map

div的高度设置为

auto

，就像使用横幅一样

---

有什么原因你不能这样做吗？

我很确定，当你使用“告诉谷歌地图”附加到哪个div时，它会删除该div中的所有内容。在这种情况下，可能包括你的图像。

你的意思是什么

在jQuery中获取宽度/高度。把它应用到地图上。显示：图像上无。这个回答有点脏，但它确实起了作用。我不知道在纯css中你会怎么做

HTML

CSS

#con{
高度：自动；
宽度：自动；
背景颜色：灰色；
}
#img{
显示：无；
}
#地图{
保证金：0；
填充：0；
显示：块；
边界：无；
}

jQuery

var imgWidth=$（'#img'）.width（）；
var imgHeight=$（'#img'）.height（）；
$（'地图'）。宽度（imgWidth）；
$（“#地图”）。高度（imgHeight）；

如果您只是将“高度”设置为“自动”，地图将不会显示。现在我有：#地图{宽度：100%；背景：#001f37；边距：0自动；高度：60%；}好的，对不起，你的横幅设置为它里面图像的高度，对吗？我认为您可以找出图像的高度（150px？），然后手动将#map div的高度设置为相同的值。或者，如果你的图像频繁地改变维度（不知道为什么会这样），你可以考虑将它加载到你的地图div后面（使用Z索引），并将地图div缩放到100%。我认为这是一个丑陋的方式。是的，我在我的帖子中提到过。我只是想找到一种方法，尽可能保持与横幅相同的尺寸。

    <div class="services banner">
        <img src="images/services/banner.jpg">
    </div>

    .banner {
        width: 100%;
    }

    .banner img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }

    <div class="contact banner">
        <img id="dummy" src="images/contact/banner.jpg" style="display: none;">
    </div>
    <div id="googlemap">
        <div id="map"></div>
    </div>

    #googlemap {
        width: 100%;
    }

    #map {
        width: 100%;
        height: 100%;
        background: #001f37;
        margin: 0 auto;
    }

$(window).load(function(){
    var imgHeight = $('#dummy').height();
    $('#googlemap').height(imgHeight);
});

$(window).resize(function(){
    var imgHeight = $('#dummy').height();
    $('#googlemap').height(imgHeight);
});