基础方法：用CSS3属性快速搞定图片比例
前阵子帮朋友的摄影博客改页面，他传的风光照都是16:9的宽屏图，结果放在卡片式布局里，不是被压扁就是两边留白，气得他差点把电脑砸了。其实解决这种问题，CSS3早就给我们准备了“利器”，根本不用写复杂脚本。
先说object-fit属性，这可是我处理图片变形的“急救包”。你只需要给img标签加两行CSS：width: 100%; height: 100%; object-fit: cover;，图片就能乖乖待在容器里，既不拉伸也不压缩，还会自动裁剪多余部分。去年给一个电商网站做详情页时，产品图有横版也有竖版，客户要求统一显示在200×200的正方形容器里，我就是用这个属性，5分钟就搞定了——横版图裁两边，竖版图裁上下，产品主体一点没少，客户当场就说“不用改了”。
不过object-fit有5个取值，得根据场景选：
你可能会问，要是容器尺寸不固定怎么办？比如响应式布局里，容器宽度会跟着屏幕变。这时候aspect-ratio属性就派上用场了，它就像给图片定了个“比例身份证”。比如你想让图片始终保持4:3的比例，直接写aspect-ratio: 4/3;，不管容器宽度是200px还是500px，高度都会自动算好。我上个月做企业官网的案例展示区，用的就是这个方法：左边文字区宽度随屏幕变，右边图片区用aspect-ratio: 1/1固定正方形，不管在手机还是电脑上，两边永远对齐，老板看完直夸“专业”。
为了让你更清楚怎么选，我整理了个表格，都是实战中 的经验：
| 方法名称 | 核心CSS代码 | 最佳适用场景 | 优势 | 注意事项 |
|---|---|---|---|---|
| object-fit | object-fit: cover/contain | 固定尺寸容器（如头像、产品图） | 代码简单，5分钟上手 | IE浏览器不支持，需降级处理 |
| aspect-ratio | aspect-ratio: 16/9 | 响应式动态容器（如案例展示） | 比例精确，适配各种屏幕 | 需要容器宽度明确（如width: 100%） |
（表格说明：以上方法基于CSS3最新标准，兼容性可参考MDN官方文档）
进阶技巧：容器适配与响应式优化
有时候光靠基础属性还不够，比如老项目里要兼容低版本浏览器，或者容器里不止图片还有其他内容。这时候就得用上“组合拳”了，我自己最常用的是padding-top百分比法，这可是个“老江湖”技巧，十年前做PC网站时就靠它，现在移动端照样好用。
原理其实很简单：CSS里padding的百分比值是基于父容器宽度计算的。比如你想要一个16:9的容器，宽高比就是16/9≈1.777，所以高度就是宽度的9/16=56.25%，直接给容器加padding-top: 56.25%;，再把图片设为绝对定位覆盖上去，图片就永远是16:9了。去年给一个教育网站做课程封面时，客户要求在图片上叠加课程名称和价格标签，我就是用这个方法：容器设padding-top固定比例，里面放img和文字div，不管屏幕怎么变，图片和文字永远对齐，连设计师都夸“比稿图还好看”。
代码示例给你抄作业：
.img-container {
position: relative;
width: 100%;
padding-top: 56.25%; / 16:9比例 /
overflow: hidden;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; / 配合object-fit效果更好 /
}
要是你觉得还不够灵活，那就得加上媒体查询了。比如手机上图片适合竖版（3:4），平板适合方图（1:1），电脑适合宽图（16:9），直接用媒体查询改aspect-ratio的值：
/ 手机端 /
@media (max-width: 767px) {
.responsive-img { aspect-ratio: 3/4; }
}
/ 平板端 /
@media (min-width: 768px) and (max-width: 1023px) {
.responsive-img { aspect-ratio: 1/1; }
}
/ 电脑端 /
@media (min-width: 1024px) {
.responsive-img { aspect-ratio: 16/9; }
}
我上个月给一个旅游网站做首页轮播，就是这么干的：手机上显示竖版风景照，电脑上自动切成宽屏全景，用户体验直接上了个档次，老板还特地给我加了奖金呢。
其实这些方法都不难，关键是多试。你下次做项目时，遇到图片变形别慌，先看看容器是固定尺寸还是动态的，再选对应的方法——固定尺寸用object-fit，动态容器用aspect-ratio，要兼容老浏览器就上padding-top。对了，记得用浏览器的开发者工具多调试，F12打开，实时改CSS看效果，比空想快10倍。
如果你按这些方法试了，不管是解决了老问题，还是发现了新技巧，都欢迎回来告诉我效果！咱们一起把网页图片做得越来越好看～
aspect-ratio和padding-top百分比法，其实就像解决同一个问题的两套工具，各有各的脾气。aspect-ratio是CSS3新出的“直球选手”，你直接告诉它“我要16:9”或者“3:4”，它就会让元素乖乖按这个比例长，代码写起来特别清爽，比如aspect-ratio: 16/9;一行就搞定，不用绕弯子算来算去。我上次给一个新品官网做布局，全用的这个属性，从设计稿到代码落地，前后不到半小时，设计师都说“这比例卡得比我用PS量的还准”。
但padding-top百分比法就像个“老江湖”，虽然看着麻烦点，兼容性却能打。它的原理是利用CSS里padding的百分比是按父元素宽度算的，比如你要16:9的容器，就给容器加padding-top: 56.25%;（9除以16等于0.5625，也就是56.25%），再把图片设成绝对定位盖上去。这种方法十年前做PC网站时就常用，现在遇到要兼容IE8这种“老古董”的项目，还得靠它救场。我去年帮一个政府网站改版，客户要求必须支持IE11，aspect-ratio在IE里完全不认，最后就是用padding-top百分比法，硬是把所有图片容器的比例都调对了，测试的时候客户盯着屏幕点头：“这老浏览器里看着也舒服！”
选的时候其实很简单，看你的项目“服务谁”。如果是给年轻人用的新网站、App内嵌页，用户手机电脑都是新款，直接上aspect-ratio，省事又精准；要是碰到那种还在用Windows XP系统、IE浏览器的老客户，或者公司内部的旧系统，那还是老老实实上padding-top百分比法，虽然多写几行代码，但能少踩很多兼容性的坑。我自己的习惯是，先问产品经理“这项目要兼容到哪个浏览器版本”，再决定用哪个——毕竟咱们写代码，不光要好看，还得让所有人都看得舒心，对吧？
object-fit属性在哪些浏览器上不支持？需要做兼容处理吗？
根据MDN文档，object-fit属性不支持IE浏览器（包括IE11及以下版本）。如果项目需要兼容这些旧浏览器，可以使用padding-top百分比法作为替代方案，或通过JavaScript动态计算图片尺寸实现类似效果。
aspect-ratio和padding-top百分比法有什么区别？该怎么选？
aspect-ratio是CSS3新增属性，直接定义宽高比，代码简洁且比例精确，适合现代浏览器；padding-top百分比法通过父容器padding-top控制高度，兼容性更好（支持IE8+），但需要额外容器嵌套。如果项目兼容目标是现代浏览器（如Chrome、Firefox、Edge 88+），优先选aspect-ratio；若需兼容IE等旧浏览器， 用padding-top百分比法。
使用object-fit: cover时，图片被裁剪导致重要内容丢失怎么办？
可以通过object-position属性调整图片显示位置，语法为object-position: x轴位置 y轴位置（如center top、20% 50%）。例如产品图的主体在左侧，可设置object-position: left center，让裁剪区域集中在右侧，避免重要内容被裁掉。
响应式布局中，图片需要在手机、平板、电脑上显示不同比例，该怎么实现？
可以结合媒体查询（media query）和aspect-ratio属性，针对不同屏幕尺寸设置不同宽高比。例如手机端（屏幕宽度≤767px）用3:4比例，平板端（768px-1023px）用1:1比例，电脑端（≥1024px）用16:9比例，通过@media规则分别定义aspect-ratio的值即可。
为什么设置了object-fit: contain后，容器底部有空白？
object-fit: contain会保持图片原始比例并完整显示，当图片宽高比与容器不一致时，容器未被填满的区域会留空白。解决方法：若允许裁剪，可改用object-fit: cover；若必须完整显示，可给容器设置背景色（如与图片边缘色相近），或通过JavaScript动态调整容器尺寸匹配图片比例。
