如何让一个div仅对一张图片隐藏溢出，另一张允许溢出？

这是可行的，但你之前的思路存在问题——父容器的overflow:hidden会统一裁剪所有超出其边界的子元素，子元素单独设置overflow:visible无法突破这个限制。要实现需求，得把需要裁剪的元素放在独立的子容器中，给这个子容器添加overflow:hidden，不受限制的元素直接和这个子容器同级放在父容器下。

修正后的代码示例 #

CSS 代码：

.container {
  position: relative;
  width: 500px;
  height: 300px;
  background: yellow;
}

/* 用于裁剪目标元素的子容器 */
.crop-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.no-overflow {
  position: absolute;
  top: 170px;
  left: 0;
  max-height: 100%;
}

.overflow {
  position: absolute;
  top: 90px;
  right: 0;
}

HTML 代码：

<div class="container">
  <div class="crop-wrapper">
    <img src="https://via.placeholder.com/150" class="no-overflow">
  </div>
  <img src="https://via.placeholder.com/250" class="overflow">
</div>

逻辑说明 #

• 父容器仅保留相对定位，不设置overflow:hidden，避免限制所有子元素
• 用.crop-wrapper这个子容器包裹需要裁剪的图片，给它设置和父容器一致的宽高以及overflow:hidden，这样只会裁剪它内部的图片
• 不受限制的图片直接放在父容器下，通过绝对定位可以自由超出父容器的边界，不会被裁剪

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