将图像放置为椭圆形

Question

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

我已经尝试过在每个图像上使用绝对位置，但这在调整大小和缩放比例上并不是一个流畅的架构。试图继续使用Adobe Illustrator，创建所有内容，并将其导出为SVG，但事实证明我周围有一个透明框，无法让我正确缩放圆圈。

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

Answer 1

椭圆形图片-选项1：边框半径

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

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

Browser support (most browsers)

椭圆形图片-选项2：剪切路径

您可以使用的另一个选项是剪切路径，但是对浏览器的支持程度较差。您可以实现相同的效果，但也可以根据需要添加过渡效果/动画。

示例： 在div上设置背景图片并添加clip-path属性：

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

来源： Clip path MDN Browser support

响应行为

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

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

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

Source: nth-child