CSS 图片样式：别再让图片“裸奔”了

上周帮朋友改一个个人博客，首页轮播图总在 Safari 里错位半像素，放大看边缘还发虚。他第一反应是“是不是图片分辨率不够？”——其实问题出在 CSS 上：img 标签没设 display: block，底下留了一行默认的文本基线间隙；而模糊感，是 image-rendering: auto 在高 DPI 屏上自动做了双线性插值。

图片在网页里不是“放上去就行”的装饰品。它既是内容载体，也是布局节点、性能变量、可访问性入口。CSS 对图片的控制力，远超 width 和 height 这两个属性。

图片不是“画布”，是“盒子”

很多同学一写图片就直接 <img src="x.jpg" width="300" height="200">，以为尺寸锁死了就万事大吉。但浏览器会把它当内联元素处理：默认有基线对齐、自带外边距、响应式行为被内联尺寸覆盖。结果就是：文字旁边排版错乱、Flex 容器里垂直居中失效、缩放时拉伸变形。

解决很简单：

img {
  display: block; /* 消除基线间隙 */
  max-width: 100%; /* 防止溢出父容器 */
  height: auto;    /* 保持宽高比 */
}

这三行不是“最佳实践模板”，而是现代页面的底线配置。少了 display: block，哪怕加了 vertical-align: top，在某些嵌套场景下仍可能露白边；不写 height: auto，固定高度会强制压缩图片，尤其在响应式断点切换时，头像变椭圆、产品图切掉一半。

真正的“自适应”，是视觉优先，不是尺寸优先

object-fit 是被低估的神器。我们总说“响应式图片”，却常忽略：一张 4:3 的风景图放进 1:1 的卡片里，是裁剪？拉伸？还是留黑边？

• object-fit: cover → 裁剪保构图（适合封面、头像）
• object-fit: contain → 完整显示，留白填充（适合图标、示意图）
• object-fit: scale-down → 智能选 cover 或 contain 中更小的那个（适合不确定比例的用户上传图）

关键在搭配 object-position：

.card-img {
  object-fit: cover;
  object-position: center 30%; /* 把人脸往上提一点，避免被裁掉头顶 */
}

这比 JS 计算裁剪坐标轻量得多，也比后端生成多套图更灵活。你甚至可以给不同设备写媒体查询：小屏用 center 20%（突出脸部），大屏用 center（保留环境）。

模糊、锐化、色彩，现在就能调

别再等设计师出“高清+锐化”两版图了。CSS 提供了原生图像处理能力：

• image-rendering: crisp-edges → 强制最近邻插值，像素风图不发虚
• filter: contrast(1.2) brightness(1.05) → 轻微增强对比，让手机拍的图更通透
• filter: blur(0.5px) → 微弱高斯模糊，做背景虚化层时比用 backdrop-filter 更兼容

注意：filter 会影响整个元素（包括边框、阴影），如果只想作用于图片本身，套一层 div 包裹，对 div 设 overflow: hidden，再对 img 单独加 filter。

加载中的体面，是用户体验的分水岭

用户不会等 3 秒加载完才看到图。空白、占位符、骨架屏……这些不是“锦上添花”，是防止布局跳动（layout shift）的刚需。

最简方案：

<img src="photo.jpg" 
     width="400" 
     height="300" 
     loading="lazy"
     alt="咖啡馆窗边的阳光">

必须声明宽高——即使响应式，也写 width="400" + height="300"，浏览器能据此预留空间，避免图片加载后把下方文字猛地往下顶。loading="lazy" 不是可选项，是现代浏览器默认启用的性能保护。

进阶做法：用 srcset + sizes 告诉浏览器“在 320px 宽屏幕下用 480w 图，在桌面用 1200w 图”，再配合 @media (prefers-reduced-motion: reduce) 给动画类图片降级为静态图。

最后一句实在话

CSS 图片样式不是炫技清单。它是一连串取舍判断：
要不要牺牲加载速度换清晰度？
用户更在意快速看到内容，还是完美构图？
这张图是信息核心，还是纯装饰？

把 img 当成和 p、button 一样需要认真对待的 HTML 元素，而不是“塞进去就完事”的资源。样式不是盖在图片上的浮层，而是它在页面里呼吸、站立、表达的方式。
下次改图，先删掉所有 width/height 内联属性，从 CSS 重写——你会突然发现，原来图片一直想好好站直。