如果你知道图像的长宽比，那么你可以创建一个响应式的<div>，它在页面调整大小时“模仿”原生的<img>元素。
例如，如果您有一个300 x180的图像，则纵横比为
1：0.6
(180/300=0.6）这意味着如果图像是100%宽，那么它是60%高。

.image {
  background-image: url(http://lorempixel.com/output/nature-q-c-300-180-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 60%;
}

字符串
看到这个jsFiddle

我一直在解决同样的问题。我有代码可以工作，但不确定它是最佳的。这假设你是在浏览器上下文中运行。

function onPhotoDrop(dropEvent) {
  dropEvent.preventDefault(); // don't let browser grab it
  
  const reader = new FileReader();
  reader.onloadend = function(eInner) {
    const dataURL = eInner.target.result;
    // Create a new img element and set its src attribute to the dropped image
    // We need to do this to obtain the photos size.
    const newImg = document.createElement("img");
    newImg.src = dataURL;
    newImg.onload = function() {
      // we need to wait till the image is loaded before proceeding.
      console.assert(newImg.width);
      console.assert(newImg.height);
      
      // here you would make a call to a function with the DataURL, width and height.
    }
  };
  reader.readAsDataURL(dropEvent.dataTransfer.files[0]);
}

字符串
然后，您可以将其传递到一个合理的存储大小，

function resizeImageSrc(
  elImg, // img.src must be set.
  minWidth,
  maxWidth,
  minHeight, 
  maxHeight) {
    console.assert(minWidth <= maxWidth);
    console.assert(minHeight <= maxHeight);
    console.assert(elImg.tagName.toLowerCase() == 'img');
    console.assert(elImg.src);
    console.assert(elImg.width);
    console.assert(elImg.height);
  let wScale = 1;
  if (elImg.width > maxWidth) {
    wScale = maxWidth / elImg.width;
  } else if (elImg.width < minWidth){
    wScale = minWidth / elImg.width;
  }
  let hScale = 1;
  if (elImg.height > maxHeight) {
    hScale = maxHeight / elImg.height;
  } else if (elImg.height < minHeight){
    hScale = minHeight / elImg.height;
  }
  // shrink or grow to fit - favor the smaller scale
  let scale = hScale < wScale ? hScale : wScale;
  const canvas = document.createElement("canvas");
  canvas.width = Math.floor(elImg.width * scale);
  canvas.height = Math.floor(elImg.height * scale);
  canvas.getContext("2d").drawImage(elImg, 0, 0, canvas.width, canvas.height);
  elImg.src = canvas.toDataURL();
  // or just return canvas.toDataURL(); if that's what you want.
}

型