如何给Google Places API返回的每个评论div添加图片并实现高度自适应？

问题1：图片仅显示在页面底部，未嵌入每条评论 #

修复方案 #

当前图片标签独立于评论容器之外，需在评论渲染完成后，通过JS将图片插入到每个评论项内部。

修改JS代码，利用插件的callback回调函数（评论渲染完成后执行）：

jQuery(document).ready(function($) {
  $("#google-reviews").googlePlaces({
    placeId: 'PlaceID',
    render: ['reviews'],
    min_rating: 5,
    max_rows: 4,
    callback: function() {
      // 给每个评论项添加图片，放在顶部
      $('.review-item').prepend('<img src="https://static.wixstatic.com/media/91e6ab_532fade046284b2cab41a13a4ba3fb8e~mv2.webp" class="review-logo">');
    }
  });
});

调整CSS，为评论内的图片设置样式（避免全局样式冲突）：

.review-logo {
  width: 10%;
  display: block;
  margin: 0 auto 10px; /* 居中并与下方内容保持间距 */
}

/* 移除全局img的宽度设置，防止影响其他元素 */
img {
  width: auto;
}

问题2：评论高度无法随内容自适应 #

修复方案 #

问题源于两处CSS错误：

1. .review-item的样式语法错误，width和flex属性未用分号分隔，导致解析异常；
2. 星级评分使用float:left导致容器高度塌陷，影响整体高度计算。

修正后的核心CSS：

.review-item {
  border-radius: 25px;
  border: 8px solid #D1D9DC;
  background: #ffffff;
  padding: 10px;
  width: 200px; /* 修复语法错误，添加分号 */
  flex: 1 1 20%;
  filter: drop-shadow(9px 6px 4px rgba(0, 0, 0, 0.6));
}

/* 替换浮动为flex布局，解决高度塌陷 */
.review-stars ul {
  display: inline-flex;
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.review-stars ul li {
  /* 移除float:left */
  list-style: none !important;
  margin-right: 1px;
  line-height: 1;
}

若不想修改布局，也可以给.review-stars添加清除浮动的样式替代：

.review-stars::after {
  content: "";
  display: table;
  clear: both;
}

内容的提问来源于stack exchange，提问作者sytez