我正在制作个人资料页面,并使用以下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;
}


但是,我正在努力使它在页面的页眉部分响应,我如何才能圆角化并同时缩放图像?

谢谢!

最佳答案

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

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

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


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

关于css - 我已经用CSS制作了一个方形图像,但是我似乎无法使其具有响应性,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29119062/

10-16 21:55
查看更多