当包含它的DIV类的大小正确时，我如何纠正拉伸不成比例的图像？

.div-class {
  background-image: url('image.jpg');
  background-size: cover; /* 或者使用contain */
  background-repeat: no-repeat;
  background-position: center;
}

.div-class {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; /* 假设图像的宽高比为2:1 */
}

.div-class img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="div-class">
  <img src="image.jpg" alt="Image">
</div>

<script>
  window.addEventListener('load', function() {
    var div = document.querySelector('.div-class');
    var img = div.querySelector('img');
    var aspectRatio = img.naturalWidth / img.naturalHeight; // 获取图像的宽高比例
    var divWidth = div.offsetWidth;
    var divHeight = divWidth / aspectRatio; // 根据宽高比例计算图像的高度
    img.style.width = divWidth + 'px';
    img.style.height = divHeight + 'px';
  });
</script>