如何让图片在可变大小容器中完美适配并保持比例？

要让图片在可变大小的容器中完美适配并保持比例，可以使用CSS来实现。以下是几种常见的方法：

1. 使用 object-fit 属性

object-fit 属性可以控制图片在容器中的显示方式，常用的值有 cover 和 contain。

• cover: 图片会保持比例并覆盖整个容器，可能会裁剪图片的一部分。
• contain: 图片会保持比例并完整显示在容器内，可能会在容器内留有空白。

.container {
    width: 100%; /* 容器宽度可变 */
    height: 300px; /* 容器高度可变 */
    overflow: hidden; /* 隐藏超出容器的部分 */
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 或 contain */
}

2. 使用 background-image 和 background-size

如果你使用背景图片而不是 <img> 标签，可以使用 background-size 属性。

• cover: 背景图片会覆盖整个容器，可能会裁剪图片的一部分。
• contain: 背景图片会完整显示在容器内，可能会在容器内留有空白。

.container {
    width: 100%; /* 容器宽度可变 */
    height: 300px; /* 容器高度可变 */
    background-image: url('your-image.jpg');
    background-size: cover; /* 或 contain */
    background-position: center; /* 图片居中显示 */
}

3. 使用 max-width 和 max-height

如果你希望图片在容器内保持比例并且不超出容器的边界，可以使用 max-width 和 max-height。

.container {
    width: 100%; /* 容器宽度可变 */
    height: 300px; /* 容器高度可变 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

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

4. 使用 aspect-ratio 属性

aspect-ratio 属性可以设置元素的宽高比，确保图片在容器中保持比例。

.container {
    width: 100%; /* 容器宽度可变 */
    aspect-ratio: 16 / 9; /* 设置容器的宽高比 */
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 或 contain */
}

5. 使用 padding-top 技巧

通过设置 padding-top 来创建一个具有特定宽高比的容器，然后使用绝对定位将图片放置在容器内。

.container {
    position: relative;
    width: 100%; /* 容器宽度可变 */
    padding-top: 56.25%; /* 16:9 宽高比 (9 / 16 * 100%) */
    overflow: hidden;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 或 contain */
}

总结

• object-fit: 适用于 <img> 标签，简单易用。
• background-image: 适用于背景图片，灵活控制。
• max-width 和 max-height: 适用于保持图片比例且不超出容器。
• aspect-ratio: 适用于现代浏览器，直接设置宽高比。
• padding-top 技巧: 适用于需要精确控制宽高比的场景。

根据你的具体需求选择合适的方法来实现图片在可变大小容器中的完美适配。