为何图片覆盖层（overlay）超出图片范围？技术咨询

问题根源是：.image-container作为父容器默认是块级元素（宽度100%），而你给图片设置了width:70%，导致图片仅占容器宽度的70%，但绝对定位的.overlay是基于容器的100%宽高渲染，所以覆盖层会超出图片范围。

修复方案 #

调整容器和图片的尺寸设置，让容器与图片尺寸完全匹配：

.image-container {
    overflow: hidden;
    position: relative;
    width: 70%; /* 与原图片的宽度比例保持一致 */
    margin: 0 auto; /* 保持图片居中，对应父容器的text-center */
}

.image-style {
    width: 100%; /* 图片占满容器宽度 */
    height: auto;
    border-radius: 15px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    opacity: 0;
    transition: .5s ease-in-out;
    background-color: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    border-radius: 15px;
}

.image-container:hover .overlay {
    opacity: 1;
}

.overlay-text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

调整说明 #

1. 给.image-container设置width:70%，让容器宽度与你原本期望的图片显示宽度一致，同时用margin:0 auto保持居中，替代父容器的text-center对图片的居中效果
2. 将.image-style的width改为100%，让图片完全填充容器，这样容器的尺寸就与图片实际显示尺寸完全匹配
3. .overlay的width:100%和height:100%现在会基于容器（即图片的实际尺寸）渲染，完美覆盖在图片上

这样修改后，覆盖层会准确匹配图片的显示尺寸，hover时的效果也会正常生效。

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