html - 图像没有为圆形图像占用完整的 div 空间
问题描述
我有一个 div 设置为父级和一个img
标签。将阴影应用于 div 时,图像未采用全宽。我尝试给图像 z-index 以弹出一点,但在这种情况下没有帮助。
我不明白为什么它适用于方形图像而不是已经圆形的图像。
.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>
解决方案
你需要这样的东西吗-
.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>
推荐阅读
- javascript - 数组和对象 [JavaScript]
- javascript - 剪切用户 id 猫鼬响应
- r - Rcpp:如何将R函数和Rcpp函数组合在一起制作一个包
- flutter - Flutter - 此函数的返回类型为 'FutureOr
',但不以 return 语句结尾 - c - 修复 cmd 窗口的尺寸
- excel - 在 Excel 中计算一年中的周数
- node.js - Polar accesslink API POST 用户不工作
- c# - 带有基本类型列表的 asp net core 编辑
- javascript - 在选项可以填充之前呈现 React-Select
- environment-variables - 如何在 Sapper 的 template.html 中使用环境变量?