Scratch中如何让图片按比例适配630x630px Div：大尺寸限制小尺寸拉伸

要实现你描述的图片适配逻辑，可以通过CSS固定容器尺寸 + JavaScript动态计算图片比例来完成，具体步骤如下：

1. 基础HTML结构 #

给容器和图片添加类名，便于后续样式和脚本控制：

<div class="image-container">
  <img src="your-image-path.jpg" alt="图片描述">
</div>

2. 容器CSS样式 #

设置固定宽高，同时可选添加居中样式让图片在容器内对齐：

.image-container {
  width: 630px;
  height: 630px;
  overflow: hidden; /* 防止极端情况图片溢出容器 */
  display: flex;
  justify-content: center;
  align-items: center; /* 让图片在容器内水平/垂直居中 */
}

3. JavaScript动态计算图片尺寸 #

通过判断图片的宽高比，分别处理大图缩小、小图放大的逻辑：

// 获取所有目标容器（如果有多个图片容器）
const imgContainers = document.querySelectorAll('.image-container');
const containerSize = 630; // 容器固定尺寸

imgContainers.forEach(container => {
  const img = container.querySelector('img');

  // 图片加载完成后执行尺寸计算
  const calculateSize = () => {
    const imgRatio = img.width / img.height;
    let newWidth, newHeight;

    if (imgRatio >= 1) {
      // 图片宽 ≥ 高：以宽度为基准
      newWidth = img.width > containerSize ? containerSize : containerSize;
      newHeight = newWidth / imgRatio;
    } else {
      // 图片高 > 宽：以高度为基准
      newHeight = img.height > containerSize ? containerSize : containerSize;
      newWidth = newHeight * imgRatio;
    }

    // 应用计算后的尺寸
    img.style.width = `${newWidth}px`;
    img.style.height = `${newHeight}px`;
  };

  // 监听图片加载事件
  img.addEventListener('load', calculateSize);
  // 处理图片已缓存的情况
  if (img.complete) calculateSize();
});

逻辑说明 #

• 当图片的宽度或高度大于630px时：以较大的边为基准，将其缩小至630px，另一边按原比例缩放，确保图片完整显示在容器内。
• 当图片的宽高均小于630px时：以原本较大的边为基准，将其拉伸至630px，另一边按原比例放大，保证图片的较大维度填满容器，同时保持比例不变。

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