如何根据浏览器大小调整图片大小？

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

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

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

window.addEventListener('resize', function() {
  var image = document.getElementById('image');
  var windowWidth = window.innerWidth;
  
  if (windowWidth < 768) {
    image.style.width = '100%';
    image.style.height = 'auto';
  } else if (windowWidth >= 768 && windowWidth < 1024) {
    image.style.width = '50%';
    image.style.height = 'auto';
  } else {
    image.style.width = '30%';
    image.style.height = 'auto';
  }
});

<picture>
  <source media="(max-width: 768px)" srcset="small.jpg">
  <source media="(min-width: 769px) and (max-width: 1024px)" srcset="medium.jpg">
  <source media="(min-width: 1025px)" srcset="large.jpg">
  <img src="default.jpg" alt="Image">
</picture>