响应式布局中图片怎么才能真正自适应容器？

程序员芸硕提问于 2026-03-01 10:16:18 阅读 17

移动

我在做移动端页面时，发现图片在不同屏幕宽度下总是超出容器或者变形，明明用了 max-width: 100% 啊，但还是不行。试过 object-fit 也没效果，是不是哪里写错了？

这是我的代码：

<div class="card">
  <img src="example.jpg" alt="示例图">
  <p>这是一段文字</p>
</div>

响应式布局

我来解答赞 5 收藏

反馈

1 条解答

UE丶晏鸣 Lv1

这个问题我之前写后台管理页面的时候也踩过坑，其实不是你写错了，是少了几个关键属性。

图片自适应容器，核心就三件事：

第一，max-width: 100% 只是限制宽度不超，但没管高度，你得加 height: auto 保持比例，不然图片会被拉伸变形。

第二，img 默认是行内元素，底部会有几像素的空隙，这是经典的"幽灵空白节点"问题，改成 display: block 就没了。

第三，object-fit 这个属性生效的前提是图片要有明确的宽高值，它是用来控制图片如何"填充"这个固定区域的，不是用来做自适应缩放的。你要是没给图片设宽高，object-fit 压根不生效。

正确的写法给你参考：

.card {

  width: 100%;

  max-width: 400px; /* 或者你想要的容器最大宽度 */

}



.card img {

  display: block;

  max-width: 100%;

  height: auto;

}

如果你想让图片始终填满容器且不变形，比如卡片封面图这种场景，那可以给图片定个高，然后用 object-fit: cover：

.card img {

  display: block;

  width: 100%;

  height: 200px; /* 固定高度 */

  object-fit: cover; /* 裁剪填充，不变形 */

}

另外检查一下你的图片是不是被行内样式或者别的 CSS 覆盖了，有时候框架里会有全局样式冲突，用开发者工具看一眼计算后的样式就知道了。

2026-03-01 11:00