infobubble中div之外的图像

Question

我正在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();

上面的代码导致：

我该如何解决这个问题？

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