HTML 图片自动适应 Div 容器大小的实现方法

有以下几种方式可以实现图片自动适应 div 容器大小：

使用 CSS 的 'background-size' 属性：将图片作为 div 的背景图像，然后使用 'background-size' 属性将背景图像自动适应 div 容器大小。示例代码如下：

<div class='container'>
  <div class='image'></div>
</div>

<style>
.container {
  width: 300px;
  height: 200px;
}

.image {
  background-image: url('image.jpg');
  background-size: cover; /* 或者 contain */
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}
</style>

使用 CSS 的 'max-width' 和 'max-height' 属性：直接将图片放入 div 容器中，然后使用 'max-width' 和 'max-height' 属性限制图片的最大宽度和最大高度为 100%。示例代码如下：

<div class='container'>
  <img src='image.jpg' alt='Image'>
</div>

<style>
.container {
  width: 300px;
  height: 200px;
}

.container img {
  max-width: 100%;
  max-height: 100%;
}
</style>

使用 JavaScript 动态调整图片大小：使用 JavaScript 获取 div 容器的宽度和高度，然后根据宽高比例调整图片的大小。示例代码如下：

<div class='container'>
  <img id='image' src='image.jpg' alt='Image'>
</div>

<script>
window.onload = function() {
  var container = document.querySelector('.container');
  var image = document.getElementById('image');
  var containerWidth = container.offsetWidth;
  var containerHeight = container.offsetHeight;
  var imageWidth = image.naturalWidth;
  var imageHeight = image.naturalHeight;
  var widthRatio = containerWidth / imageWidth;
  var heightRatio = containerHeight / imageHeight;
  var scale = Math.min(widthRatio, heightRatio);
  
image.style.width = imageWidth * scale + 'px';
  image.style.height = imageHeight * scale + 'px';
};
</script>

以上是三种常用的方法，可以根据实际需求选择适合的方式来实现图片自动适应 div 容器大小。