Question

我正在使用这个CSS创建一个220px宽的圆形图像，以其容器为中心（一个1140px网格的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;
}

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

Answer 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。

Answer 2

border-radius: 50%;会使元素变为圆形（只要宽度和高度相同）。

CSS：如何在窗口调整大小时自动调整圆形图像的大小？

2 个答案: