做网站或者搞内容发布的朋友应该都遇到过这种情况：电脑上看着挺正常的图片，一换到手机上就变形了，要么被拉得老长，要么被裁得只剩中间一块。其实这个问题说白了就是图适没做好。今天我就把自己踩过坑、试过有效的方法整理一下，不管你是做游戏截图站还是个人博客，看完都能直接用。
为啥你的图片一到手机就废了
很多人以为图片设个百分比宽度就完事了，其实没那么简单。我最早做游戏壁纸站的时候就是这么干的，PC上1920宽的图直接扔上去，加个width:100%，结果在手机上打开，图片高度也跟着等比缩，整个页面被一张图撑得老长，用户得滑半天才能看到下面的内容。这就是典型的图适问题没处理好。核心原因在于图片有固定宽高比，容器宽度变了但高度没约束，要么溢出要么留白。还有一种情况是用了固定像素宽度，比如width:800px，小屏幕上直接横向滚动条就出来了，体验极差。
max-width这招虽然老但真的好用
最基础也最稳的方法就是给图片加一个max-width:100%，同时height设为auto。这样图片最大不会超过容器宽度，高度自动按比例算，不会变形。我现在的游戏截图页面全都这么写的。但要注意，父容器不能有overflow:hidden之外的奇怪设置，不然可能裁掉图片。另外有些老浏览器对max-width支持不太好，不过现在基本不用管了。这个方案适合绝大多数普通图文页面，简单粗暴有效。
object-fit让图片裁切不再尴尬
如果你需要图片填满一个固定尺寸的框，比如游戏视频封面、周边商品展示图，那object-fit就是救星。以前遇到封面图尺寸不统一，要么被拉变形，要么留白难看。用了object-fit:cover之后，图片自动裁切多余部分，保持比例填满容器。配合object-position还能控制裁切位置，比如人物在左边的图就设left center。我一般在游戏美女和游戏壁纸列表页用这个，缩略图整整齐齐的，用户看着也舒服。不过要注意IE不支持，但现在做站基本可以忽略IE了。
srcset和picture标签才是真响应式
前面说的都是让一张图适应各种屏幕，但真正讲究的做法是给不同屏幕准备不同尺寸的图。手机屏幕就那么大，你非要加载一张4K大图，浪费流量还拖慢速度。srcset可以让浏览器根据屏幕宽度自动选合适的图，比如小屏加载480宽的，大屏加载1200宽的。picture标签更灵活，还能根据设备像素比来选图。我自己的游戏壁纸站改造后，移动端加载速度直接快了一截，百度收录也好了不少，因为页面打开快了对SEO有好处。这招强烈推荐给做图片站的朋友。
背景图怎么搞才不翻车
背景图和img标签的图适处理不太一样。最常见的就是background-size:cover，让背景图铺满容器同时保持比例。但要注意容器得有明确高度，不然背景图显示不出来。我一般会给一个padding-top的百分比来撑高度，比如padding-top:56.25%就是16:9的比例。另外background-position也要调，默认是center center，有时候人物脸被裁掉了就得改成top center。移动端还可以用媒体查询换更小的背景图，省流量。
实际项目里我踩过的几个坑
说几个真实翻车案例。有次给游戏评测文章配图，图片是截屏来的，宽度不统一，我偷懒没设max-width，结果有一张超宽图直接把整个布局撑破了，侧边栏都挤没了。还有一次用object-fit忘了设高度，图片高度变成0，整个区域空白，排查了半天。另外提醒一句，图片的alt属性一定要写，既是SEO需要也是无障碍要求，百度图片搜索也能靠这个识别。最后就是压缩，再好的图适技巧也架不住一张几MB的大图，该压还是得压，webp格式现在兼容性已经很好了。
总结一下，图适的核心就三件事：不让图片变形、不让图片溢出、不让图片拖慢速度。max-width和height:auto解决基础问题，object-fit解决裁切问题，srcset解决性能问题。把这几个组合起来用，基本上各种屏幕都能hold住。你要是刚起步，先把前两个用上，效果立竿见影。后面有空再折腾srcset，那是个精细活但值得做。
喜欢 
高兴
鬼脸
呵呵
无聊
伤心
