css - 我用 CSS 制作了一个圆形的方形图像，但我似乎无法使其响应

Question

我正在制作个人资料页面，并使用下面的 CSS 代码将方形图像变成了圆形:

.circular {
width: 250px;
height: 250px;
background-image: url('./images/profile.jpg');
background-size: cover;
display: block;
border-radius: 125px;
-webkit-border-radius: 125px;
-moz-border-radius: 125px;
margin-left: auto;
margin-right: auto;
margin-top: -150px;
}

然而，我正在努力在我的页面的标题部分做出响应，有什么想法可以让我在圆 Angular 的同时缩放图像吗？

谢谢!

Answer 1

我建议像已经提到的那样避免使用固定的 px 值，而是使用百分比。

另一种方法(如果适用于您的情况)可能是使用基于屏幕的响应式样式，例如:

@media screen and (min-width:960px) {
    .circular {
        /* ... */
    }
}
@media screen and (min-width:1440px) {
    .circular {
        /* ... */
    }
}

有了它，您可以确保在调整设计/图像大小时具有固定的过渡点。