如何使用图像制作伪元素比例？

Question

我在div 框中有一个img 元素，它上面有一个伪元素（即::before）。我现在想让该图像以与伪元素相同的方式缩放。以便伪保持在与现在放置的位置相同的位置（屏幕宽度为 375px）。不知道该怎么做。有人可以帮我吗？

<div class="image-box">
    <img class="image-box__image" src="assets/image.png">
</div>

.image-box {
    position: relative;
    &::before {
        content: "";
        position: absolute;
        width: 8.25em;
        height: 8.25em;
        background: tomato;
        border-radius: 50%;
        left: calc(50% - 4.5em);
        top: -5px;
    }
    &__image {
    width: 50%;
    transform: translateX(50%); 
    }
}

提前致谢！

Answer 1

如果您希望伪元素进行缩放，则需要使用流体单位。 注意下面的方法使用了css属性aspect-ratio，this property isn't fully supported yet。

我们如何实现响应式循环：

• 圈子的width 使用% 而不是em
• 使用aspect-ratio: 1/1 使高度等于宽度
• 更改left 属性
• 添加transform 以使圆圈居中

.image-box {
  position: relative;
}

.image-box::before {
    content: "";
    position: absolute;
    width: 12.5%;
    aspect-ratio: 1/1;
    background: tomato;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: -5px;
    z-index: 2;
}

.image-box__image {
    width: 50%;
    transform: translateX(50%); 
}

<div class="image-box">
    <img class="image-box__image" src="https://source.unsplash.com/random/400x300">
</div>