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

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.

我们如何实现响应圈：

使用 % 而不是 em 作为圆的 width
使用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>

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

How do I make pseudo-element scale with the image?

css

image

sass

pseudo-element

responsive-design