信息气泡中 div 外的图像答案

【问题标题】：Image outside of div in infobubble信息气泡中 div 外的图像
【发布时间】：2016-01-23 06:29:37
【问题描述】：

我正在研究谷歌地图并使用InfoBubble 库显示一个信息窗口。我的问题是，当我使用 CSS 属性显示外部 div 的图像时，它显示的是 div 内的一半图像。

这是我的 CSS 代码：

#wider-header{
    overflow: hidden;
    display:inline-block;
    width: 100px;
    height: 300px;
}

#wide-header img {
    position:relative;
    top:-70px;
    float:right;
    border-radius: 50% 50% 50% 50%;
    border: 2px solid #d81f27;  
}

和 JavaScript：

infoBubble2 = new InfoBubble({
    map: map,
    content: "<div id='wide-header'><img id='jdImg' src='http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg' width='100' height='100' alt='userImage'></div>",
    position: new google.maps.LatLng(-35, 151),
    padding: 10,
    backgroundColor: '#fff',
    borderRadius: 4,
    arrowSize: 10,
    borderWidth: 1,
    borderColor: '#2c2c2c',
    disableAutoPan: false,
    hideCloseButton: true,
    arrowPosition: 50,
    arrowStyle: 3
});
infoBubble2.open();

上面的代码是这样的：

我该如何解决这个问题？

【问题讨论】：

为什么图片的 CSS 中有top:-70px;？看起来是什么将img 移出它的包含div
@AlvaroMontoro- 用于将 img 移出 div 的顶部
所以你希望它在顶部，但在 div 之外可见？
是的，我的要求是在 div 内显示一半图像，在 div 之外显示一半图像。
从#wider-header 中删除overflow: hidden; 是否会显示图像？如果不是，则可能是具有overflow:hidden 的气泡样式，并且会更棘手

标签： html css google-maps-api-3 infowindow infobubble

【解决方案1】：

我通过更改 infobubble.js 库中的这些行找到了我的解决方案

     // Content area
             var contentContainer = this.contentContainer_ = document.createElement('DIV');
             contentContainer.style['overflowX'] = 'auto';
             contentContainer.style['overflowY'] = 'auto';
into
             // Content area
             var contentContainer = this.contentContainer_ = document.createElement('DIV');
             contentContainer.style['overflowX'] = 'visible';
             contentContainer.style['overflowY'] = 'visible';

Here is the required solution

【讨论】：

很高兴您找到了解决方案。也许您可以扩展/建议对 infobubble.js 库进行扩展，使其更通用，并且它具有启用/禁用溢出的选项