html - infobubble 中 div 之外的图像

Question

我正在使用 Google map 并使用 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();

上面的代码导致:

我该如何解决这个问题？

Answer 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