在每个页面上,我在顶部有一个横幅。横幅是1980px乘657px。
HTML:
<div class="services banner">
<img src="images/services/banner.jpg">
</div>
CSS:
.banner {
width: 100%;
}
.banner img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}
因此高度取决于图像和视口大小。
在我的联系页面上,我想要一张谷歌地图而不是横幅。我的问题是我希望它与横幅一样高。我希望我可以在#map div中放置一个透明的横幅,但添加到#map div的任何类或内容都会消失。
如何用CSS或JS实现这个想法?
使用Empi的答案,我提出了以下解决方案:
HTML:
<div class="contact banner">
<img id="dummy" src="images/contact/banner.jpg" style="display: none;">
</div>
<div id="googlemap">
<div id="map"></div>
</div>
CSS:
#googlemap {
width: 100%;
}
#map {
width: 100%;
height: 100%;
background: #001f37;
margin: 0 auto;
}
JS:
$(window).load(function(){
var imgHeight = $('#dummy').height();
$('#googlemap').height(imgHeight);
});
$(window).resize(function(){
var imgHeight = $('#dummy').height();
$('#googlemap').height(imgHeight);
});
有点hacky,但它确实有效。
答案 0 :(得分:1)
你的意思是like this?
在jQuery中获取宽度/高度。将其应用于地图。显示:图像上无。有点肮脏的答案,但它的确如此。我不知道你会怎么做纯css。
<div id="con">
<img id="img" src="http://dummyimage.com/600x200/000/fff.jpg" />
<iframe id="maps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d76608.9275331472!2d23.1560658!3d53.127625249999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ffc048f41971d%3A0x72317dcc8bf07b2c!2sBia%C5%82ystok!5e0!3m2!1snl!2spl!4v1397752663976"></iframe>
</div>
#con {
height: auto;
width: auto;
background-color: gray;
}
#img {
display: none;
}
#maps {
margin: 0;
padding: 0;
display: block;
border: none;
}
var imgWidth = $('#img').width();
var imgHeight = $('#img').height();
$('#maps').width(imgWidth);
$('#maps').height(imgHeight);
答案 1 :(得分:0)
为什么你不只是将#map
div的高度设置为auto
,就像你对横幅一样?
有什么理由你不能这样做吗?
答案 2 :(得分:0)
我相当肯定当你使用告诉谷歌地图附加哪个div时,它会删除该div中的所有内容。在这种情况下,可能包括您的图像。