图像未占用圆角图像的完整 div 空间

Question

我有一个div设置为父级，里面有一个img标签。将阴影应用于div 时，图像未采用全宽。我尝试给图像 z 索引以弹出一点，但在这种情况下没有帮助。

我不明白为什么它适用于方形图像而不是已经圆形的图像。

.profile-card__img {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
transform: translateY(-50%);
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: 4;
box-shadow: 0px 5px 50px 0px #6c44fc, 0px 0px 0px 7px rgba(107, 74, 255, 0.5);
}
.profile-card__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

<div class="profile-card__img">
<img src="https://miro.medium.com/fit/c/256/256/2*xhm2q3S8_kRKnrHumo3Rvg.png">
</div>

Answer 1

这不是一个真正的答案，但我真的不明白你的意思。是图像和边框状框阴影之间的轻微白色边框吗？因为如您所见，通过查看下面第一个片段中的红色虚线，图像位于同一位置，这意味着它们都具有相同的宽度。

.container {
position: relative;
}
.red-vertical-dash {
position: absolute;
left: 52%;
top: 0;
bottom: 0;
border-right: 1px dashed red;
z-index: 1000;
}
.profile-card__img.shadow {
box-shadow: 0px 5px 50px 0px #6c44fc, 0px 0px 0px 7px rgba(107, 74, 255, 0.5);
}
.profile-card__img.rounded,
.profile-card__img.rounded img {
border-radius: 50%;
}
.profile-card__img {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.profile-card__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

<div class="container">
<div class="red-vertical-dash"></div>
<div class="profile-card__img">
<img src="https://miro.medium.com/fit/c/256/256/2*xhm2q3S8_kRKnrHumo3Rvg.png">
</div>
<div class="shadow rounded profile-card__img">
<img src="https://miro.medium.com/fit/c/256/256/2*xhm2q3S8_kRKnrHumo3Rvg.png">
</div>
<div class="shadow profile-card__img">
<img src="https://miro.medium.com/fit/c/256/256/2*xhm2q3S8_kRKnrHumo3Rvg.png">
</div>
</div>

另一种方法是将图像添加为背景图像，但我猜图像 url 是动态声明的，因此这是不够的，老实说，除了更少的代码之外，我不知道这会实现什么。

.profile-card__img {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
box-shadow: 0px 5px 50px 0px #6c44fc, 0px 0px 0px 7px rgba(107, 74, 255, 0.5);
transform: translateY(-50%);
/* new code */
background-image: url("https://miro.medium.com/fit/c/256/256/2*xhm2q3S8_kRKnrHumo3Rvg.png");
background-size: cover;
background-position: center;
}

<div class="profile-card__img"></div>

Answer 2

你需要这样的东西吗 -

.profile-card__img {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
/*border-radius: 50%;*/
overflow: hidden;
position: relative;
z-index: 4;
box-shadow: 0px 5px 50px 0px #6c44fc, 0px 0px 0px 7px rgba(107, 74, 255, 0.5);
}
.profile-card__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/*border-radius: 50%;*/
}

<div class="profile-card__img">
<img src="https://miro.medium.com/fit/c/256/256/2*xhm2q3S8_kRKnrHumo3Rvg.png">
</div>