非背景图模式下图片裁剪填充div无拉伸及移动端适配问题咨询

问题排查 #

1. 代码存在基础属性错误：img标签的资源路径被误写进了class属性，导致图片无法正常加载。
2. 图片容器未设置高度自动适配父级弹性盒高度，图片本身也没有配置填充裁剪规则，父级高度被右侧文本撑开时，图片容器仍维持原始图片高度，就会出现上下留白。

修复方案 #

通过弹性盒高度适配+object-fit属性即可实现需求，无需使用背景图：

• 给图片容器添加高度占满父级的样式（Tailwind中为h-full，对应原生CSSheight: 100%）
• 给img标签添加w-full h-full object-cover样式，其中object-fit: cover会保持图片原有比例填充容器，超出部分自动裁剪，不会出现拉伸变形
• 修正img标签的src属性配置

修复后完整代码如下：

<div class="flex bg-red-500">
  <div class="overflow-hidden flex-shrink-0 w-1/3 h-full">
    <img class="w-full h-full object-cover" src="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2017/05/what-is-a-stock-story-770x375.jpg" alt="示例图片">
  </div>
  <div>
    <h1>Long Title</h1>
    <h2>Some long sub text under the long title. Some long sub text under the long title. Some long sub text under the long title</h2>
  </div>
</div>

实现原理 #

object-fit: cover的行为和背景图的background-size: cover完全一致，配合容器的overflow:hidden，无论右侧文本高度如何变化，左侧图片都会自动填充整个容器，超出容器的部分自动裁剪，不会出现拉伸变形或上下留白的问题。

内容的提问来源于stack exchange，提问作者jordansmith