在图像加载前保持img元素的纵横比？

img {
  max-width: 100%;
  max-height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

window.addEventListener('load', function() {
  var img = document.querySelector('img');
  var containerWidth = img.parentNode.offsetWidth;
  var containerHeight = img.parentNode.offsetHeight;
  var imgRatio = img.naturalWidth / img.naturalHeight;

  if (containerWidth / containerHeight > imgRatio) {
    img.style.width = '100%';
    img.style.height = 'auto';
  } else {
    img.style.width = 'auto';
    img.style.height = '100%';
  }
});