css - 移动设备上带有轮廓偏移的圆形照片

Question

我很难过，需要一些帮助。我编写了 CSS 来制作圆形照片，将 1px 的细轮廓设置为偏移 -12px 并出现在照片内。这适用于桌面设备，但轮廓半径不会超过边界半径：移动设备上的 50%。关于我做错了什么或如何解决的任何建议。

.round-photo {
  width:400px;
  height:400px;
  margin: auto;
}
.round-photo img {
  width:100%;
  height:inherit;
  border-radius: 50% !important;
  outline: solid 1px white;
  outline-offset: -12px;
}

<div class="round-photo">
  <img src="https://placeimg.com/640/480/people">
</div>

这是我试图让我的照片在移动设备上查看时的样子。轮廓偏移出现在图像内部并保留 50% 的半径 - 在照片内部形成一个完整的圆圈。

然而，这就是我在 Apple iPhone 8 上的 Brave/Chrome 中的图像

这就是我在 Apple iPhone 8 上的 Duck Duck Go 中的图像

这是我的图像在 Apple iPhone 8 上的 Safari 中的样子

Answer 1

你可以尝试这样的事情。创建了一个codepen。让我知道这对你有用吗？

https://codepen.io/_makki/pen/JjOYJgL

.round-photo {
    width: 400px;
    height: 400px;
    margin: auto;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
}
.round-photo:after {
    content: "";
    position: absolute;
    border: 1px solid white;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    border-radius: 100%;
}
.round-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}