如何让React图片网格中的不同尺寸图片实现均匀裁剪？

你只需要修改图片的CSS样式，让它在容器内居中并按比例裁剪，替换原有的.img-wrap img样式即可：

.img-wrap img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

原理说明： #

• object-fit: cover：强制图片按原始比例缩放，填满整个容器空间，超出容器的部分会被自动裁剪，避免图片拉伸变形。
• top: 50%; left: 50%; transform: translate(-50%, -50%)：将图片的中心点与容器的中心点对齐，这样图片超出容器的部分会从上下左右四个方向均匀裁剪，而不是只裁剪右侧。

如果需要兼容不支持object-fit的旧浏览器，可以改用以下写法，同样能实现居中裁剪：

.img-wrap img{
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这种方式下，图片会保持自身比例缩放至至少填满容器，超出部分被容器的overflow:hidden裁剪，同时居中定位保证裁剪均匀。

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