如何使用HTML & CSS实现图片裁切并与文本并排摆放的效果？

网页开发场景 #

无需提前修改原图，用CSS即可同时实现裁切和排版效果：

• 图片自适应裁切
  给图片外层加固定尺寸的容器，搭配object-fit属性实现等比例裁切，不会拉伸变形：

/* 图片容器，控制最终显示的尺寸 */
.img-box {
  width: 220px;
  height: 300px;
  overflow: hidden;
}
.img-box img {
  width: 100%;
  height: 100%;
  /* cover会自动按比例填满容器，超出部分裁切，内容默认居中显示 */
  object-fit: cover;
  /* 可调整裁切保留的区域，比如设置为object-position: top就保留图片顶部内容 */
  object-position: center;
}

• 图文并排布局
  给图文外层加Flex布局即可快速实现并排效果：

.content-wrapper {
  display: flex;
  gap: 24px; /* 图文之间的间距 */
  align-items: flex-start; /* 顶部对齐，改成center就是垂直居中对齐 */
}
/* 文字区域自动占满剩余宽度 */
.text-area {
  flex: 1;
}

对应HTML结构：

<div class="content-wrapper">
  <div class="img-box">
    <img src="你的图片路径" alt="图片描述">
  </div>
  <div class="text-area">
    这里填写你的文本内容
  </div>
</div>

文档排版场景（Markdown/Word等） #

• 支持HTML的Markdown编辑器
  直接把代码写进文档即可，样式可以内联到标签里，不需要单独的CSS文件：

<div style="display:flex;gap:20px;align-items:flex-start">
  <div style="width:200px;height:300px;overflow:hidden">
    <img src="图片地址" alt="描述" style="width:100%;height:100%;object-fit:cover">
  </div>
  <div style="flex:1">你的文本内容</div>
</div>

• 不支持自定义样式的平台/Word文档

1. 先手动裁切图片：Windows可以用自带的「画图」工具的裁切功能，Mac用「预览」App的裁切工具，裁成你需要的尺寸
2. Markdown场景用表格实现并排：

| 图片区域 | 文本区域 |
| --- | --- |
| ![图片描述](图片地址) | 这里放你的文本内容 |

3. Word场景右键图片，选择「文字环绕」-「四周环绕」，就可以直接把图片拖到文本旁边的位置。

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