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