html5 - div中的图像在infobubble中

我正在使用Google Map并使用InfoBubble库显示一个InfoWindow。我的问题是，当我使用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();

上面的代码导致：



我怎样才能解决这个问题？

最佳答案

我通过更改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