-1

我正在使用这个 CSS 创建一个 220px 宽的圆形图像，在其容器内居中（1180px 网格的 3 列跨度）：

.circular-image {
  display: block;
  margin: 0 auto;

  width: 220px;
  height: 220px;
  border-radius: 110px;
  -webkit-border-radius: 110px;
  background: url(images/some-image.png);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

而且我知道您可以使用以下方法使图像自动重新缩放：

img {
  height: auto;
}

如何对圆形图像执行此操作？

4

2 回答 2

1

圆形图像的确切问题是什么？如果您对图像的“圆度”有疑问，您应该将border-radius属性更改为相对值：

.circular-image {
    display: block;
    margin: 0 auto;

    width: 75%;
    height: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: red;
}

这是一个工作jsFiddle。

于 2013-06-08T15:45:48.577 回答
0

border-radius: 50%;将根据它的大小制作一个元素（只要宽度和高度相同）。

于 2013-06-08T15:44:59.347 回答