求助：如何无损缩小图片？设置宽高后图片挤压且最后一张消失

首先，你代码里的.review选择器中border-radius: 55缺少单位，需要补充如55px这类单位，否则该属性不会生效。

针对图片挤压、最后一张消失的问题，按以下方式调整：

1. 避免图片挤压，保持原始宽高比 #

不要直接给.review img设置固定的width和height，改用以下两种方式之一：

• 用max-width/max-height限制最大尺寸，同时让图片自动适配比例：

.review img {
  max-width: 200px; /* 按需设置最大宽度 */
  max-height: 200px; /* 按需设置最大高度 */
  width: auto;
  height: auto;
}

• 若必须设置固定宽高，使用object-fit保证图片比例不变：

.review img {
  width: 200px;
  height: 200px;
  object-fit: contain; /* 完整显示图片，留白；用cover则裁剪填充容器 */
}

2. 解决最后一张图片消失问题 #

flex容器默认flex-wrap: nowrap，当容器宽度不足以容纳所有图片时，图片会被挤压甚至溢出容器。添加flex-wrap: wrap让图片自动换行：

.review {
  display: flex;
  flex-direction: row;
  border-radius: 55px; /* 补充单位 */
  flex-wrap: wrap;
  gap: 10px; /* 可选，给图片间添加间距 */
}

若不想换行，可禁止图片被压缩并添加横向滚动：

.review {
  display: flex;
  flex-direction: row;
  border-radius: 55px;
  overflow-x: auto; /* 开启横向滚动 */
  gap: 10px;
}
.review img {
  flex-shrink: 0; /* 禁止图片被压缩 */
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
}

完整示例代码 #

.review {
  display: flex;
  flex-direction: row;
  border-radius: 55px;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px;
}
.review img {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
  border-radius: 8px; /* 可选，给图片添加圆角 */
}

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