html - Google map infoWindow : different outcomes for images and text with the same css 的图像和文本样式问题

Question

我想避免巨大的 infoWindows，所以这是他们的 html 内容的字符串:

var contentString = "<h3>"+this.type+"</h3>"+
"<h4 class = 'view-text'>" + this.title + "</h4>"+
"<p class = 'view-text'>"+this.desc+"</p>"+
"<img class = 'view-img' src='https://maps.googleapis.com/maps/api/streetview?size=400x400&location="
+this.cords.lat+","+this.cords.lng+"'></img>";

这是CSS:

.view-img,
.view-text {
max-width: 15vw;
}

最后，图片和文字的宽度是不一样的: http://imgur.com/a/ArFJF

如何使文本和图像对齐？

Answer 1

使用 infoWindow maxWidth 属性而不是样式化 div 元素解决了我最初试图解决的巨型 infoWindows 的问题。

infoWindow = new google.maps.InfoWindow({
        content: infoWindowContent(place),
        maxWidth: 200
    });