如何按统一比例缩放不同尺寸图片以适配单个容器？

要实现所有图片按相同比例缩放、且最宽图片不超出容器宽度的需求，核心是基于容器宽度与原始图片最大宽度的比值计算统一缩放比例，再应用到所有图片上。以下分两种场景给出实现方案：

场景1：已知原始图片的最大宽度（纯CSS实现） #

如果提前知道所有图片中最宽的原始宽度（比如示例中假设最大原始宽度为16px），可以用纯CSS变量实现：

.container {
  /* 容器宽度，可根据需求动态调整 */
  width: 40px;
  /* 设定原始图片的最大宽度（无单位数值） */
  --max-original-width: 16;
  /* 计算统一缩放比例：容器宽度≥最大原始宽度时为1，否则为容器宽度/最大原始宽度 */
  --scale: min(1, calc(100% / (var(--max-original-width) * 1px)));
  
  /* 可选：设置图片排列方式，这里用纵向排列 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.container img {
  /* 应用缩放比例，保持宽高比 */
  transform: scale(var(--scale));
  transform-origin: top left;
  /* 避免缩放后图片布局偏移，固定缩放原点 */
  flex-shrink: 0;
}

场景2：未知原始图片的最大宽度（JS+CSS实现） #

如果无法提前确定图片的最大宽度，用JS自动计算最大原始宽度，再动态设置缩放比例，兼容性和通用性更好：

HTML #

<div class="container">
    <img src="16x20.png" />
    <img src="16x40.png" />
    <img src="16x80.png" />
</div>

CSS #

.container {
  /* 容器宽度，可动态调整 */
  width: 40px;
  /* 可选：图片排列方式，这里用纵向排列 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.container img {
  /* 由JS设置的统一缩放比例，默认值为1（原始尺寸） */
  transform: scale(var(--scale-factor, 1));
  transform-origin: top left;
  flex-shrink: 0;
}

JavaScript #

const container = document.querySelector('.container');
const imgs = container.querySelectorAll('img');

// 计算并更新缩放比例的函数
function updateImageScale() {
  // 获取容器的实际可用宽度
  const containerWidth = container.clientWidth;
  if (containerWidth === 0) return;

  // 找出所有图片的原始最大宽度
  let maxOriginalWidth = 0;
  imgs.forEach(img => {
    // 优先用图片的原始自然宽度，未加载完成时用元素宽度兜底
    const imgWidth = img.naturalWidth || img.width;
    if (imgWidth > maxOriginalWidth) {
      maxOriginalWidth = imgWidth;
    }
  });

  // 计算统一缩放比例：容器足够宽时显示原图，否则按比例缩小
  const scaleFactor = Math.min(1, containerWidth / maxOriginalWidth);
  // 将比例赋值给CSS变量
  container.style.setProperty('--scale-factor', scaleFactor);
}

// 初始化执行一次
updateImageScale();

// 窗口尺寸变化时重新计算
window.addEventListener('resize', updateImageScale);

// 图片加载完成后重新计算（避免未加载时获取宽度错误）
imgs.forEach(img => {
  if (img.complete) {
    updateImageScale();
  } else {
    img.addEventListener('load', updateImageScale);
  }
});

关键说明 #

• transform-origin: top left 确保图片缩放时从左上角开始，避免位置偏移；
• JS方案会自动处理图片加载完成的情况，保证计算的原始宽度准确；
• 如果需要横向排列图片，只需修改CSS中.container的flex-direction为row即可。

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