如何用CSS为响应式图片添加后方形状及指定投影？

要解决你的问题，核心是给<img>套个容器（因为图片是替换元素，无法直接添加伪元素），通过容器的伪元素实现后方形状和投影，同时保证响应式适配：

修改后的HTML #

<div class="header">
    <div class="flexcontainer">
        <div class="image-wrapper">
            <img id="image" src="CV-PP-2.jpg" alt="Samira Hadid">
        </div>
        <h1>Samira Hadid</h1>
    </div>
    <h3>Full-Stack Web Developer</h3>
</div>

调整后的CSS #

.flexcontainer{
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
    align-items:center;
    flex-wrap: wrap;
}

.image-wrapper {
    position: relative;
    width: 300px;
    max-width: 90%; /* 小屏幕自动缩小，避免溢出 */
    aspect-ratio: 1/1; /* 固定正方形比例，保证圆形图片不变形 */
}

#image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    z-index: 1; /* 让图片压在伪元素上方 */
    object-fit: cover; /* 图片裁剪适配圆形，避免拉伸 */
}

/* 实现后方形状与投影 */
.image-wrapper::after {
    content: "";
    position: absolute;
    top: 8%;
    left: 8%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e0e0e0; /* 后方形状底色，可自行调整 */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); /* 模拟目标投影效果 */
    z-index: 0;
    transform: scale(0.95); /* 形状略小于图片，视觉更自然 */
}

核心要点 #

• 用容器包裹图片，通过容器的伪元素实现后方效果，避开图片无法添加伪元素的限制
• 图片采用width:100%+max-width实现响应式，aspect-ratio保证圆形比例不失调
• 伪元素用百分比定位和尺寸，会随容器（图片）的大小自动适配，完全支持响应式
• 通过z-index控制层级，确保形状和投影始终在图片后方

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