html用js实现图片跟着浏览器大小变大变小

可以使用以下代码实现：

HTML：

<div id="image-container">
  <img src="path/to/image.jpg" id="image">
</div>

CSS：

#image-container {
  width: 100%;
  height: 100%;
  position: relative;
}

#image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}

JavaScript：

window.addEventListener('resize', function() {
  var containerWidth = document.getElementById('image-container').offsetWidth;
  var containerHeight = document.getElementById('image-container').offsetHeight;
  var image = document.getElementById('image');
  var imageWidth = image.offsetWidth;
  var imageHeight = image.offsetHeight;
  var widthRatio = containerWidth / imageWidth;
  var heightRatio = containerHeight / imageHeight;
  var ratio = Math.min(widthRatio, heightRatio);
  image.style.width = imageWidth * ratio + 'px';
  image.style.height = imageHeight * ratio + 'px';
});

这段代码会在浏览器窗口大小改变时触发 resize 事件，然后根据容器和图片的宽高比计算出缩放比例，最后通过设置图片的宽高来实现图片的自适应。