CSS中图片与覆盖层的尺寸定位问题求助

核心问题分析 #

1. 图片超出父容器：未给父容器#product-image-1设置position: relative，导致绝对定位的图片以整个文档为基准，不受父容器宽度约束。
2. 覆盖层无法显示：
   • 初始opacity: 0的元素无法触发自身hover事件；
   • 父容器因内部元素均为绝对定位，高度塌陷为0，覆盖层height: 100%实际高度为0。

修正后的完整代码 #

HTML（无需修改）

<div class="flex row">
    <div class="product-image-wrapper flex row" id="product-image-1">
         <img src="./images/product-img-1.jpeg" alt="" class="product-image">
          <div class="image-overlay"></div>
    </div>
</div>

CSS

#product-image-1 {
    width: 250px;
    position: relative; /* 让子元素绝对定位以当前容器为基准 */
}

.product-image {
    width: 100%; /* 强制图片占满父容器宽度 */
    display: block; /* 去除图片默认的inline-block间距 */
    /* 移除absolute，让图片以流布局撑开父容器高度，避免父容器塌陷 */
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(211, 211, 211, 0.5);
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 2;
}

/* 绑定hover事件到父容器，确保鼠标悬停图片区域时触发覆盖层显示 */
#product-image-1:hover .image-overlay {
    opacity: 1;
}

可选调整（如果需要保留图片绝对定位） #

若因特殊需求必须让图片保持position: absolute，需给父容器设置固定高度（或根据图片比例用padding-top模拟高度）：

#product-image-1 {
    width: 250px;
    position: relative;
    height: 300px; /* 替换为实际图片高度 */
    /* 或用比例计算：比如图片是4:3，设置padding-top: 75%，同时height:0 */
    /* height: 0; */
    /* padding-top: 75%; */
}

.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，避免拉伸 */
}

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