如何通过CSS或JavaScript让用户上传图片符合设计稿尺寸要求

首先明确两个场景的实现方案：

• 如果仅要求展示给用户的图片尺寸符合宽100-360px、高100-200px的区间，不需要校验用户上传的原图本身的尺寸，纯CSS就可以实现
• 如果需要校验用户上传的原始图片的尺寸，不符合要求时拦截上传，必须使用JavaScript实现

CSS实现展示适配 #

你当前的写法固定了容器宽高，用object-fit: contain时小尺寸原图会出现留白，无法放大到最小尺寸要求，修改代码如下即可：

.photo{
  /* 宽高自动适配，保持原图比例 */
  width: auto;
  height: auto;
  /* 限制宽高区间 */
  min-width: 100px;
  max-width: 360px;
  min-height: 100px;
  max-height: 200px;
  object-fit: contain;
  object-position: left center;
}

修改后高度只有50px的原图会按比例等比放大到高度100px，不会出现形变，超过最大尺寸的原图也会自动缩小到符合区间。

JavaScript实现上传前校验 #

如果需要在用户上传时判断原始图片尺寸是否符合要求，直接复用以下代码即可：

// 绑定上传文件选择框
const uploadDom = document.querySelector('input[type="file"]');
uploadDom.addEventListener('change', function(e) {
  const selectFile = e.target.files[0];
  if (!selectFile) return;
  // 读取文件生成临时图片获取原始尺寸
  const tempImg = new Image();
  tempImg.src = window.URL.createObjectURL(selectFile);
  tempImg.onload = function() {
    const originW = tempImg.width;
    const originH = tempImg.height;
    // 尺寸校验
    if (originW < 100 || originW > 360 || originH <100 || originH > 200) {
      alert('图片尺寸不符合要求：宽度需在100-360px之间，高度需在100-200px之间');
      uploadDom.value = '';
      return;
    }
    // 校验通过后执行后续上传逻辑
  }
})

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