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

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

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

img {
  height: auto;
}

---

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

边界半径：50%

将使元素按其大小（只要宽度和高度相同）变圆。

圆形图像的确切问题是什么？如果图像的“圆度”有问题，则应将

边界半径

属性更改为相对值：

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

---

这是一个工作模式。

您应该始终将unfixed属性放在前缀属性之后。此外，Unfixed

border radius

和Unfixed

box shadow

现在都有很好的支持（参见caniuse.com），这意味着如果你不需要支持FF3.6或旧的Android版本，你甚至可以完全删除前缀。只给你的图像一个灵活的宽度-即百分比，高度已经是自动的。所有这些设置在一些较旧的Android和Blackberry版本中无法正确呈现。使用较高的px或em值（999em）以获得最佳浏览器支持。如果图像不是正方形，如果图像是矩形，则无法使用css将其变成椭圆形

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