如何裁剪图片特定区域以实现HTML中段落环绕图片的效果

方案1：CSS background属性实现（兼容性最优） #

无需提前处理原图片，通过背景定位直接取右下角区域，配合float实现文字环绕，兼容所有主流浏览器包括旧版IE：

<style>
/* 自定义裁剪后尺寸、边距即可 */
.vr-img {
  width: 280px; /* 裁剪后宽度，可按需调整 */
  height: 180px; /* 裁剪后高度，可按需调整 */
  background: url('https://i.sstatic.net/CtyRi.jpg') no-repeat right bottom;
  float: left; /* 设为right即可实现图片居右、左侧文字环绕 */
  margin: 0 16px 16px 0;
}
</style>

<div class="vr-img"></div>
<p>此处放置你的段落内容，文字会自动环绕在图片周边，多输入几行文本即可看到完整的环绕效果，无需额外调整其他布局属性。</p>

方案2：img标签+object属性实现（保留图片语义） #

如果项目要求必须使用<img>标签而非背景元素，可以用object-fit和object-position组合实现裁剪，无需修改原图片资源：

<style>
.vr-img {
  width: 280px;
  height: 180px;
  object-fit: none; /* 不缩放原图，直接取对应区域 */
  object-position: right bottom; /* 定位到右下角取图 */
  float: left;
  margin: 0 16px 16px 0;
}
</style>

<img src="https://i.sstatic.net/CtyRi.jpg" alt="戴VR头显的男子" class="vr-img">
<p>此处放置你的段落内容，文字会自动环绕在图片周边。</p>

方案3：clip-path精确裁剪（适合自定义裁剪范围） #

如果需要精确控制裁剪的比例，可以用clip-path的inset属性，参数依次为上、右、下、左四个方向需要裁剪掉的占比：

<style>
.vr-img {
  float: left;
  margin: 0 16px 16px 0;
  /* 示例：裁掉原图上方60%、左侧50%的区域，仅保留右下角部分 */
  clip-path: inset(60% 0 0 50%);
}
</style>

<img src="https://i.sstatic.net/CtyRi.jpg" alt="戴VR头显的男子" class="vr-img">
<p>此处放置你的段落内容，文字会自动环绕在图片周边。</p>

提示：如果不需要保留原图只需要裁剪后的资源，也可以提前用画图工具裁剪后再引入项目，以上前端方案适合需要动态调整裁剪范围、不想多存一份图片资源的场景。

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