Css 将图像放置为椭圆形

嗨，我想知道是否有一种更简单的方法可以在CSS中以椭圆形状排列一些图像，如下图所示（稍微向右）

我曾尝试在每张图像上使用绝对位置，但在调整大小和缩放时，这不是一个流畅的架构。尝试使用AdobeIllustrator，创建所有内容，将其导出为SVG，但结果发现它周围有一个透明框，无法正确缩放圆

如果你有任何建议，请告诉我。谢谢

---

椭圆图像-选项1：边界半径

您可以在图像上设置50%的边界半径，使其为椭圆形，但请确保其比率为平方。非正方形图像不会形成一个完美的圆。 例如：

.image {
    width: 150px;
    height: 150px;
    border-radius: 50% 50%;
}

---

椭圆图像-选项2：剪辑路径

您可以使用的另一个选项是“剪辑路径”（clip path），但对浏览器的支持程度较低。您可以实现相同的效果，但如果需要，还可以向其添加过渡/动画

例如： 在div上设置背景图像并添加剪辑路径属性：

.divclassname{
    clip-path: circle(50% at 50% 50%);
}

资料来源：

反应性行为

为了获得良好的响应性能，您可以将顶部和左侧位置的单位设置为百分比“%”。当然，这取决于您在代码中使用的内容。这允许图像在缩放/调整大小时响应其父级。您可能需要1或2个媒体查询来调整或调整某些屏幕尺寸（主要是手机/平板电脑）

如果要在不同位置设置每个图像的样式，可以在每个图像或第n个子选择器上使用不同的类：

.image:nth-child(1) {
    position: absolute;
    top: 10%;
    left: 20%;
}
.image:nth-child(2) {
    position: absolute;
    top: 25%;
    left: 40%;
}
Etc.

---

您可以在css中使用

边框半径：100%