Flexbox布局下同排图片尺寸不统一的问题求助

• 选择器完全失效：原代码写的.row>img是直接子选择器，实际img元素嵌在.row → .product → .pro-con → a三层嵌套下，根本选不中目标，导致之前写的图片尺寸规则全部失效，图片全按原始尺寸渲染，自然大小不一。
• HTML结构错乱：原循环逻辑每次遍历到偶数记录就新开一个.row容器，再在循环末尾无差别闭合标签，会出现flex容器嵌套混乱，根本做不到把4个商品放在同一排。
• 尺寸规则逻辑错误：就算选择器能命中，之前写的height:100%; width:auto也没法统一尺寸——作为父级的图片区域没有固定高度基准，图片会跟着自身原始高度撑高，自适应宽度的写法只会进一步放大尺寸差异。

第一步：调整CSS规则 #

删掉无效的.row>img整段代码，给真实的图片元素加统一尺寸约束。核心属性object-fit: cover能解决不同比例图片的适配问题，避免固定宽高导致的图片拉伸变形：

.product a img {
  width: 100%;
  height: 180px; /* 可根据需求调整统一高度 */
  object-fit: cover; /* 保持原图比例居中裁切，不会拉伸变形 */
  display: block; /* 消除行内img自带的底部间隙 */
  transition: transform 0.5s;
}

补全卡片的高度规则，避免因为内容多少导致卡片高度参差：

.pro-con {
  background-color: #3369FF;
  height: 100%;
}

原有Flex布局的.row、.product规则不需要大改，配合flex-basis:25% + max-width:200px的设置，刚好能实现一行4个卡片均匀分布的效果。

第二步：修正JSP循环逻辑 #

把原来用cnt奇偶判断生成容器的乱逻辑换掉，改成先把所有商品读进内存列表，再按每4个为一组生成一个flex行容器，彻底解决嵌套错乱的问题：

<%
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/users", "root","123456767");
Statement stm = conn.createStatement();
ResultSet rs = stm.executeQuery("SELECT * FROM users.product");

// 先把所有商品数据暂存到列表
List<Map<String, Object>> productList = new ArrayList<>();
while(rs.next()) {
  Map<String, Object> item = new HashMap<>();
  item.put("pid", rs.getString("product_id"));
  item.put("pname", rs.getString("product_name"));
  item.put("price", rs.getString("price"));
  productList.add(item);
}

// 按每4个商品为一组，生成对应的flex行
for(int rowStart = 0; rowStart < productList.size(); rowStart += 4) {
%>
<div class="row">
  <% 
  // 遍历当前行的4个商品
  for(int idx = rowStart; idx < rowStart +4 && idx < productList.size(); idx++) {
    Map<String, Object> item = productList.get(idx);
  %>
  <div class="product">
    <div class="pro-con">
      <a href="Bdetail.jsp?pid=<%=item.get("pid")%>">
        <img src="./ProductDisplayServlet?product_id=<%=item.get("pid")%>"/>
      </a>
      <h2><%=item.get("pname")%></h2>
      <p><%=item.get("price")%></p>
    </div>
  </div>
  <% } %>
</div>
<%
}
%>

如果不希望裁切图片、想要完整展示所有原图内容，可以把object-fit: cover换成object-fit: contain，同时给图片区域加统一的背景色，避免留白区域视觉上参差。如果需要调整图片的统一尺寸，只需要修改height属性的数值即可，不需要改动其他结构。

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