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;
}

然而，我正在努力在页面的标题部分内进行响应，任何想法如何我可以有圆角并使图像同时缩放？

谢谢！

Answer 1

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

另一种方法（如果适用于您的情况）可以使用基于屏幕的响应式样式，如：

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

这样，您可以确保在调整设计/图像大小时有固定的转换点。

Answer 2

您可以尝试以下内容。

确保父容器的宽度合理，因为.circular将占用其所有宽度。

＆＃13;

.wrap {
  width: 400px; /* for example... */
}
.circular {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -150px;
  background-image: url(http://placehold.it/200x200);
  background-size: cover;
}

＆＃13;

<div class="wrap">
  <div class="circular"></div>
</div>

＆＃13;

我已经使用CSS制作了一个方形图像，但是我似乎无法使其响应

2 个答案: