使用 max-width 和 max-height 或 object-fit 属性，可以在 CSS 中让图片等比例缩放，保持图像的宽高比。
如何使用 CSS 让图片等比例缩放
开门见山回答问题：
要在 CSS 中让图片等比例缩放，可以使用 max-width 和 max-height 属性，或使用 object-fit 属性。
详细展开回答：
立即学习“前端免费学习笔记（深入）”；
1. 使用 max-width 和 max-height 属性
广研企业网站管理系统中英文双语版
下载
v1.8新增功能简介： 一、后台新增生成网站地图和生成Sitemap.xml的功能。 二、新增下载中心功能，可在后台上传doc,xls,ppt,rar,pdf文件。 三、新增产品缩略图自动缩放功能，图片按比例缩放，解决了图片变形问题。 四、新闻、产品详细页新增了上一个、下一个的功能，改善用户体验。 五、在线客服新增了阿里巴巴贸易通在线客服。 六、可在后台设置分享代码，如百度分享和AddThis等。
img {
max-width: 100%;
max-height: 100%;
}使用这种方法，图片将自动等比例缩放以适应容器的大小，同时保持图像的宽高比。
2. 使用 object-fit 属性
img {
object-fit: contain;
}object-fit 属性有以下几种值：
- contain：图片等比例缩放以完全填充容器，同时保持图像的宽高比。
- cover：图片等比例缩放以完全填充容器，但可能会裁剪图片。
- fill：图片拉伸以填充容器，忽略图像的宽高比。
注意：
-
object-fit属性需要浏览器支持，在较旧浏览器中可能无法使用。 -
在使用 CSS 缩放图片时，需要注意以下几点：
- 缩放可能会导致图像质量下降。
- 如果图像的宽高比与容器的不同，可能会导致图片变形。
- 应尽可能使用图像的原始尺寸来获得最佳质量。
