如何在 div 中自动调整图像

在 web 开发过程中，经常会遇到需要在 div 中放置一张图片的情况，而且需要让这张图片自动适应 div 的大小。下面介绍一些常见的方法。

利用 CSS 属性

可以通过设置图像的宽度和高度为 100% 来让它自动适应 div 的大小。

div img {
  width: 100%;
  height: 100%;
}

使用此方法时应该注意图像的宽高比例，否则可能会导致图像变形。

利用 JavaScript

如果需要更精细的控制图像大小，可以使用 JavaScript。以下是一个示例：

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

<script>
  var container = document.getElementById('container');
  var img = container.getElementsByTagName('img')[0];
  img.onload = function() {
    var aspectRatio = img.width / img.height;
    var containerWidth = container.offsetWidth;
    var containerHeight = container.offsetHeight;
    var containerAspectRatio = containerWidth / containerHeight;
    if (aspectRatio > containerAspectRatio) {
      img.style.width = '100%';
      img.style.height = 'auto';
    } else {
      img.style.height = '100%';
      img.style.width = 'auto';
    }
  };
</script>

这个示例中，先获取了 div 和图像的节点，然后在图像加载完成后计算它的宽高比和 div 的宽高比。如果图像宽高比大于 div 的宽高比，则将图像的宽度设置为 100%，高度自动调整；反之则将图像的高度设置为 100%，宽度自动调整。

利用 CSS 媒体查询

另一种更简单的方法是使用 CSS 媒体查询。假设我们有一个 div 的宽度为 500px，高度为 300px，而且希望在小屏幕和大屏幕上显示不同大小的图像，可以这样设置：

div {
  width: 500px;
  height: 300px;
}

img {
  width: 100%;
  height: auto;
}

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

@media only screen and (min-width: 768px) {
  img {
    max-width: 100%;
    max-height: 100%;
  }
}

在这个示例中，我们用 CSS 设置了 div 的宽高，让图像的宽度为 100%，高度按宽高比自动调整。然后使用媒体查询来针对小屏幕和大屏幕分别设置不同的大小和缩放方式。

总结

以上是三种常见的方法，可以让我们在 div 中放置图像时更加灵活和方便。具体使用时，需要根据实际需求和场景选择合适的方法。