Изображение за пределами div в infobubble

Question

Я работаю над Google Map и покажу InfoWindow, используя библиотеку InfoBubble. Моя проблема в том, что когда я показываю изображение для внешнего div с свойствами CSS, он показывает половинное изображение, которое находится в 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