绝对定位容器内图片响应式布局CSS解决方案求助

我在绝对定位的div（.item）里放了一张图片，想要实现图片响应式布局，而且最大宽度不能超过它自己的原始宽度（也就是max-width:100%的效果）。
现在的代码里，给.item加width:100%能正常工作，但我不想这么做——这会挡住后面可能存在的内容，而且我也不想用z-index或者pointer-events来解决这个遮挡问题。另外，.wrap容器不能用flex布局，因为里面有多个子元素需要单独对齐。
要是把.item的width:100%删掉，窗口缩小调整的时候，item会跟着收缩，导致图片尺寸比它能显示的最大尺寸还小，求个CSS解决方案。

给.item设置min-width: max-content，同时保留max-width:100%就能解决这个问题。这样.item的宽度默认会贴合图片的原始宽度，窗口缩小时又会被限制在父容器的100%宽度内，既不会遮挡后方内容，又能让图片保持最大可显示尺寸。

修改后的完整代码：

CSS #

.wrap {
  position: relative; /* 必须给父容器设相对定位，否则.item会相对于视口定位 */
  min-height: 100vh; /* 示例高度，可根据实际需求调整 */
}

.item {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  min-width: max-content; /* 让.item宽度默认匹配图片原始宽度 */
  max-width: 100%; /* 窗口缩小时，限制.item宽度不超过父容器 */
}

.item img {
  max-width: 100%;
  display: block;
  margin: auto;
}

HTML #

<div class="wrap">
  <div class="item">
    <img src="https://via.placeholder.com/350x150" />
  </div>
</div>

原理说明 #

• min-width: max-content：让.item的宽度默认跟着图片原始尺寸走，窗口足够大的时候，item不会被无端拉伸，刚好包住图片，不会挡住后面的内容。
• max-width:100%：当窗口宽度小于图片原始宽度时，item的宽度就被限制在父容器的范围内，图片也会跟着响应式缩小，保证不会超出父容器的边界。
• 注意：一定要给.wrap加position: relative，不然绝对定位的item会相对于整个浏览器窗口定位，而不是相对于wrap容器。

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