HTML 图像超出 div

当图像尺寸大于所在 div 元素的尺寸时，可能会出现图像被截断的情况。本文将介绍如何处理这种情况以避免图像被截断。

解决方案

有两种解决方案可选：一种是缩小图像以适应容器大小，另一种是使用 CSS 设置容器大小来适应图像大小。

缩小图像

通过改变图像尺寸可以简单地避免图像超出容器。可以通过以下方法实现：

<div style="width: 200px; height: 200px; overflow: hidden;">
  <img src="image.jpg" style="max-width:100%; height:auto;" />
</div>

这个示例将容器大小设置为 200x200 像素，并将 overflow 属性设置为 hidden，从而避免了图像超出容器。图像的 max-width 属性被设置为 100%，这将使其自动适应容器的宽度。图像的高度将根据容器大小自动调整，从而保持其纵横比。

调整容器大小

另一种解决方案是调整容器大小以适应图像尺寸。可以通过以下方法实现：

<div style="max-width: 100%; height: auto;">
  <img src="image.jpg" style="width: 100%" />
</div>

该示例将容器的 max-width 属性设置为 100%，这将使容器宽度自动适应其父元素的宽度。容器的高度将根据其宽度和图像比例自动调整。图像的 width 属性被设置为 100%，这将使其覆盖整个容器。

总结

这篇文章介绍了两种解决方案来避免图像超出容器。对于最佳效果，可以使用这两种方法的任一种或两种组合。当缩放图像时，请注意保持其纵横比，以免使其变形。