css实现图片宽高自适应等比例缩放的方式有以下几种：

• 使用 object-fit 属性，可以指定图片的内容如何适应容器的宽高。例如，object-fit: contain 可以让图片保持原始比例并完整显示在容器内，object-fit: cover 可以让图片保持原始比例并填充整个容器，多余的部分会被裁剪。
• 使用 max-width 和 max-height 属性，可以限制图片的最大宽度和高度，并让其自动缩放到合适的大小。例如，如果容器的宽高都是 300px，而图片的原始宽高是 600px * 400px，则设置 max-width: 100%; max-height: 100%; 可以让图片缩放到 300px * 200px。
• 使用 padding-top 或 padding-bottom 属性，可以根据容器的宽度来计算出合适的高度，并使用背景图来显示图片。例如，如果图片的原始宽高比是 16:9，则设置 padding-top: 56.25%; background-image: url(...); background-size: cover; background-position: center; 可以让图片等比例缩放并填充整个容器。

具体使用哪种方式取决于你想要达到什么效果和兼容性要求。你可以参考以下代码示例：

/* 使用 object-fit */
.img-container {
    width: 300px;
    height: 300px;
}

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

/* 使用 max-width 和 max-height */
.img-container {
    width: 300px;
    height: 300px;
}

.img-container img {
    max-width: 100%;
    max-height: 100%;
}

/* 使用 padding-top 或 padding-bottom */
.img-container {
    width: 300px;
    padding-top: calc(9 / 16 * 100%); /* 根据宽高比计算出合适的百分比 */
    background-image: url(...);
    background-size: cover;
    background-position: center;
}

这3种方式分别使用的场景如下：

• 使用 object-fit 属性，适合于图片的原始宽高比和容器的宽高比不一致，且需要保持图片完整显示或填充容器的情况。例如，一个新闻网站的列表页，每个新闻项都有一个固定大小的图片缩略图，但是原始图片的大小和比例各不相同，这时可以使用 object-fit: contain 或 object-fit: cover 来实现图片等比例缩放。
• 使用 max-width 和 max-height 属性，适合于图片的原始宽高比和容器的宽高比一致或接近，且需要让图片自动适应容器大小的情况。例如，一个相册网站的详情页，每张图片都有一个固定宽度的容器，但是原始图片的高度不确定，这时可以使用 max-width: 100%; max-height: 100%; 来实现图片等比例缩放。
• 使用 padding-top 或 padding-bottom 属性，适合于需要根据容器宽度来动态计算高度，并使用背景图来显示图片的情况。例如，一个视频网站的首页轮播图，每张轮播图都有一个固定宽高比（如16:9），但是随着屏幕大小变化而变化，这时可以使用 padding-top: calc(9 / 16 * 100%); background-image: url(...); background-size: cover; background-position: center; 来实现图片等比例缩放。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/12408