HTML img max 属性

在HTML中，<img> 元素用于插入图像。我们可以使用 max-width 和 max-height 属性来控制图像的最大宽度和最大高度。

max-width 属性

max-width 属性定义了图像的最大宽度。

如果图像的宽度大于最大宽度值，则图像会被缩小以适合最大宽度。如果图像的宽度小于或等于最大宽度值，则不会进行任何缩放。

示例代码：

<img src="image.jpg" alt="image" style="max-width: 100%;">

这里的 style 属性将 max-width 设置为 100%，这将使图像保持原始宽高比，同时自适应其所在容器的宽度。

max-height 属性

max-height 属性定义了图像的最大高度。

如果图像的高度大于最大高度值，则图像会被缩小以适合最大高度。如果图像的高度小于或等于最大高度值，则不会进行任何缩放。

示例代码：

<img src="image.jpg" alt="image" style="max-height: 200px;">

这里的 style 属性将 max-height 设置为 200px，这将使图像的高度被限制在 200px，同时自适应其宽度。

max-width 和 max-height 的组合

我们还可以通过将 max-width 和 max-height 组合使用来同时控制图像的最大宽度和最大高度。这将使图像在保持原始宽高比的同时，始终适合所在容器。

示例代码：

<img src="image.jpg" alt="image" style="max-width: 100%; max-height: 200px;">

这里的 style 属性将 max-width 设置为 100%，将 max-height 设置为 200px，这将使图像的宽度自适应其所在容器的宽度，并限制其高度不超过 200px。

总之，通过使用 max-width 和 max-height 属性，我们可以轻松地控制图像的大小并实现响应式设计。