嘿，这个问题我刚好处理过不少次，分两种场景给你讲最实用的方法，不管是前端直接实现还是提前处理图片都能搞定：

这是最省心的方式，不用动原图，靠CSS就能让所有图片统一尺寸且不拉伸：

• 先给所有图片的父容器设置固定的统一宽高，比如你想要300px宽、200px高的容器：

  .image-container {
    width: 300px;
    height: 200px;
    overflow: hidden; /* 配合裁剪用，超出容器的部分隐藏 */
    /* 可选：加个背景色，当用contain模式时空白部分更统一 */
    background-color: #f0f0f0;
  }
  

• 然后给图片添加object-fit属性，根据需求选两种模式：

  .image-container img {
    width: 100%;
    height: 100%;
    /* 模式1：裁剪多余部分，保证图片填满容器，比例不变 */
    object-fit: cover;
    /* 模式2：完整显示图片，空白部分用容器背景填充，比例不变 */
    /* object-fit: contain; */
  }
  

  两种模式的区别：cover会裁掉图片超出容器的部分（适合想让图片占满容器的场景），contain会完整保留图片，空白处用容器背景补全（适合不想裁剪图片的场景）。

如果你希望直接使用尺寸完全统一的图片文件，可以用图片工具批量处理：

• Photoshop批量处理：
  1. 打开一张示例图片，点击「窗口>动作」新建一个动作，开始录制
  2. 选择「图像>画布大小」，设置你想要的目标宽高，定位选「居中」（这样裁剪/填充都以图片中心为基准）
  3. 如果图片比例比目标小，就用纯色或模糊背景填充空白；如果比例大，直接裁剪多余部分
  4. 停止录制动作，然后选中所有要处理的图片，批量应用这个动作即可
• 轻量工具替代：像IrfanView、XnConvert这类工具，都支持批量设置尺寸，直接选择「按比例裁剪到指定尺寸」或「填充到指定尺寸」的选项，操作简单且速度快。

这两种方法都亲测有效，你可以根据自己的技术栈和需求来选～

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