如何用CSS仅对图片底部设置overflow hidden并保持响应式，搭配圆形背景

实现方案 #

核心思路是将圆形背景和图片裁剪逻辑分层，不对外层容器设置全局裁剪，仅针对图片底部做单独裁剪，保证圆形背景完整显示的同时，图片仅底部超出部分被隐藏。

修改后的代码：

.container {
  --container-h: 420px;
  margin: 0 auto;
  width: 420px;
  max-width: 500px;
  height: var(--container-h);
  background-color: red;
  border-radius: 50%;
  text-align: center;
  position: relative;
  /* 无需设置overflow: hidden，避免裁剪图片顶部超出部分 */
}
.container img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* 仅裁剪图片底部超出容器高度的部分，四个参数对应上、右、下、左的裁剪量 */
  clip-path: inset(0 0 calc(100% - var(--container-h)) 0);
  /* 若需固定裁剪底部固定高度，比如裁掉底部20px，可改为clip-path: inset(0 0 20px 0) */
}

<div class="container">
  <img src="https://via.placeholder.com/300x400" alt="示例图">
</div>

方案说明：

• 外层.container仅负责渲染圆形背景，不设置全局overflow: hidden，因此图片顶部、左右超出圆形的部分可以正常显示
• 通过给img设置clip-path属性实现仅底部裁剪，兼容Chrome、Firefox、Safari等绝大多数现代浏览器
• 通过CSS变量绑定容器高度，后续修改容器尺寸时无需同步调整裁剪参数，维护更方便
• 若需要兼容IE等老旧浏览器，可给图片套一个无背景的内层容器，内层容器高度等于外层容器高度、设置overflow: hidden、定位对齐外层容器底部，也可实现相同效果。

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