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

在图像加载前保持img元素的纵横比是通过设置CSS样式来实现的。可以使用以下方法：

使用CSS的max-width和max-height属性来限制图像的最大宽度和最大高度，从而保持纵横比。例如：

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

这样设置后，图像将自动按比例缩放以适应其容器的大小。

使用CSS的object-fit属性来控制图像在容器中的适应方式。object-fit属性有以下几个值可选：fill、contain、cover、none、scale-down。其中，contain和cover可以保持图像的纵横比。例如：

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

这样设置后，图像将按比例缩放以适应容器，并保持其纵横比。如果使用object-fit: cover;，则图像将被裁剪以填充容器。

使用JavaScript来动态计算图像的宽度和高度，并设置给img元素。例如：

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%';
  }
});

这段JavaScript代码会在页面加载完成后执行，根据容器的宽度和高度以及图像的原始宽高比来动态设置img元素的宽度和高度，从而保持纵横比。

推荐的腾讯云相关产品：腾讯云对象存储（COS）产品介绍链接地址：https://cloud.tencent.com/product/cos