如何在HTML/CSS中裁剪图片？及移动端圆圈定位偏移修正

问题1：如何在HTML/CSS中实现图片裁剪？ #

常用的图片裁剪方案有以下几种：

1. 容器+object-fit实现比例裁剪 #

这是最易用的标准化方案，能保持图片比例并填充容器，自动裁剪超出部分：

<div class="crop-box">
  <img src="your-image.jpg" alt="裁剪图">
</div>

.crop-box {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.crop-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 按比例裁剪填充，可选值：contain/scale-down等 */
}

2. clip-path实现自定义形状裁剪 #

可以实现圆形、多边形等非常规裁剪：

.circle-crop img {
  clip-path: circle(50% at center); /* 圆形裁剪 */
  /* 多边形示例：clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); */
}

3. 容器+图片定位手动裁剪 #

通过调整图片的绝对位置，精准控制显示区域：

.custom-crop {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.custom-crop img {
  position: absolute;
  top: -60px; /* 向上偏移裁剪顶部 */
  left: -40px; /* 向左偏移裁剪左侧 */
}

问题2：底部圆圈图片定位左侧，手机屏幕偏移的修正 #

你的代码中使用固定像素值top: 350px和百分比right: -7%，在手机窄屏上会因视口尺寸变化导致偏移，可通过以下方式修正：

1. 给父容器设置相对定位 #

确保绝对定位的图片以父容器为基准，而非整个视口：

<div class="bg-container">
  <img class="circletop-img" src="images/bg-pattern-top.svg" alt="cicletop-img">
  <img class="circlebottom-img" src="images/bg-pattern-bottom.svg" alt="circlebottom-img">
  <img class="card-img" src="images/bg-pattern-card.svg" alt="card-img">
</div>

.bg-container {
  position: relative;
  min-height: 100vh;
  overflow: hidden; /* 隐藏超出容器的图片部分 */
}

2. 修改底部圆圈的定位逻辑 #

用视口单位（vw）和transform适配不同屏幕，同时调整到左侧定位：

.circlebottom-img {
  width: 800px;
  max-width: 90vw; /* 限制手机端图片宽度，避免溢出 */
  height: auto;
  z-index: -1;  
  position: absolute;
  bottom: 0; /* 固定在底部，替代固定top值 */
  left: -20vw; /* 用视口百分比控制左侧偏移，适配所有屏幕 */
  transform: translateY(50%); /* 垂直方向调整，避免完全超出底部 */
}

3. 可选：媒体查询精细化适配 #

针对小屏幕单独调整参数，优化显示效果：

@media (max-width: 768px) {
  .circlebottom-img {
    width: 600px;
    left: -30vw;
    bottom: -100px;
  }
}

当前效果：

期望效果：

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