在 HTML 中，你可以使用 CSS 来保持图片的比例，确保图片在调整大小时不会失真或变形。以下是几种常见的方式来实现这一效果：

1. 使用 max-width 和 height: auto

这种方法适合希望图片宽度随容器调整，但高度保持自适应的场景：

html复制代码<img src="image.jpg" alt="Image" style="max-width: 100%; height: auto;">

解释：

• max-width: 100%：确保图片的宽度不会超过父容器的宽度。

• height: auto：自动调整高度，保持图片比例。

2. 使用 object-fit

如果图片在一个固定尺寸的容器中，并且你希望图片缩放保持比例而不裁剪内容，可以使用 object-fit：

<img src="image.jpg" alt="Image" style="width: 100%; height: 100%; object-fit: contain;">

解释：

• object-fit: contain：图片将根据容器宽高比例缩放，同时保持原比例，不会裁剪。

• width: 100%; height: 100%：将图片放入固定大小的容器中。

3. 使用 aspect-ratio

CSS aspect-ratio 属性可以直接设置宽高比，从而保持图片比例。

<img src="image.jpg" alt="Image" style="aspect-ratio: 16 / 9; width: 100%;">

解释：

• aspect-ratio: 16 / 9：指定宽高比为 16:9，这种方法会让图片根据比例自动调整高度。

• width: 100%：图片宽度占满父容器，高度根据宽高比自动调整。

4. 使用 padding-bottom 技巧（适用于背景图片）

如果你使用的是背景图片，并希望根据比例调整容器高度，可以使用 padding-bottom 技巧：

<div style="background-image: url('image.jpg'); background-size: cover; padding-bottom: 56.25%; width: 100%;"></div>

解释：

• padding-bottom: 56.25%：基于宽度设置高度，56.25% 对应 16:9 的宽高比（9/16 = 0.5625）。

• background-size: cover：背景图片将按照容器大小自适应，同时保持比例。

这几种方法都可以帮助你在不同的场景中保持图片的比例，选择适合你的具体场景的方式进行使用。