如何修改代码使网页任意缩放级别下box shadow与图片尺寸一致

问题场景 #

网页缩放至67%时的效果：

网页缩放至90%时的效果：

需求：修改代码，使模拟阴影的home__shadow元素在任意缩放级别下，尺寸都与图片保持一致。

当前代码 #

CSS代码 #

.home__perfill{
    position: relative;
    justify-self: center;
   }

.profile_image{
    width: 350px;
    height: 425px;
}

.profile_img {
    max-width: 90%;
    max-height: 90%;
    display: block;
    border: 4px solid black;
    border-radius: 10px;
 }


.home__shadow{
    width:90%;
    height: 90%;
    background-color: antiquewhite;
    position: absolute;
    top:1rem;
    left: 1.75rem;
    border: 4px solid black;
    border-radius: 10px;
    z-index: -1;
}

HTML代码 #

<div class="home__perfill">
    <div class="profile_image">
        <img src="./assets/profileImg.jpeg" alt="Ming Yang profile picture" class="profile_img"/>
        <div class="home__shadow"></div>
    </div>
</div>

修改方案 #

核心思路是让阴影容器的尺寸完全跟随图片的实际显示尺寸，避免固定宽高导致的缩放错位：

修改后的CSS代码 #

.home__perfill{
    position: relative;
    justify-self: center;
}

.profile_image{
    position: relative; /* 设置为相对定位，作为阴影的参照容器 */
    display: inline-block; /* 容器宽度自适应图片实际宽度 */
}

.profile_img {
    max-width: 90%;
    max-height: 90%;
    display: block;
    border: 4px solid black;
    border-radius: 10px;
    box-sizing: border-box; /* 确保边框计入元素总尺寸 */
}

.home__shadow{
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
    position: absolute;
    top: 1rem;
    left: 1.75rem;
    border: 4px solid black;
    border-radius: 10px;
    z-index: -1;
    box-sizing: border-box; /* 与图片保持一致的盒模型计算方式 */
}

说明 #

1. 移除.profile_image的固定宽高，改用inline-block让容器自适应图片的实际显示尺寸，确保缩放时容器能跟随图片变化
2. 给图片和阴影都添加box-sizing: border-box，让边框宽度计入元素的总宽高，避免边框导致尺寸偏差
3. 阴影的宽高设为100%，相对于.profile_image容器，这样无论图片怎么缩放，阴影都会和容器（即图片）保持完全一致的尺寸

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