如何根据窗口大小更改图像大小

@media (max-width: 768px) {
  .responsive-image {
    width: 100%;
    height: auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .responsive-image {
    width: 50%;
    height: auto;
  }
}

@media (min-width: 1025px) {
  .responsive-image {
    width: 30%;
    height: auto;
  }
}

window.addEventListener('resize', function() {
  var image = document.getElementById('myImage');
  var windowWidth = window.innerWidth;

  if (windowWidth < 768) {
    image.style.width = '100%';
  } else if (windowWidth >= 768 && windowWidth < 1024) {
    image.style.width = '50%';
  } else {
    image.style.width = '30%';
  }
});