如何在保留图片比例前提下缩放图片以适配设定的最大最小宽高要求

方案说明 #

你最初写的CSS代码存在问题，同时设置min-width/min-height和max-width/max-height的规则会强制图片宽高符合数值要求，当原图比例和640:360不一致时会拉伸变形，无法保留原始比例。

可以使用CSS object-fit 属性实现需求，正确代码如下：

img {
  /* 先固定渲染容器的尺寸为要求的标准尺寸 */
  width: 640px;
  height: 360px;
  /* 保持图片原始比例缩放，完整显示在容器内，不会被裁剪 */
  object-fit: contain;
  /* 可选：缩放后图片在容器内居中显示，留白均匀分布 */
  object-position: center;
}

适配效果验证 #

该方案完全覆盖你的要求：

• 原始图片尺寸大于640px*360px：会等比例缩小，直到宽度不超过640px或高度不超过360px，完整显示无裁剪
• 原始图片尺寸小于640px*360px：会等比例拉伸，直到宽度达到640px或高度达到360px，全程保留原始比例
• 无论原图比例是否和16:9匹配，都不会出现拉伸变形的情况

如果你的需求是希望图片填满整个640px*360px容器、多余部分裁剪，只需要把object-fit的值改为cover即可。

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