将图像放置在椭圆形中

Question

嘿，我想知道是否有更简单的方法将一些图像排列成椭圆形 CSS 如下图所示（稍微向右转）。

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

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

Answer 1

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

您可以在图像上设置 50% 的边框半径，使它们呈椭圆形，但要确保它们的比例是平方的。非正方形图像不会形成完美的圆形。例如：

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

Browser support (most browsers)

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

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

示例：在 div 上设置背景图片并添加剪辑路径属性:

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

来源： Clip path MDN Browser support

响应行为

要获得良好的响应行为，您可以将顶部和左侧位置的单位设置为百分比“%”。当然，这取决于您在代码中使用的内容。这允许图像在 scaling/resizing 时响应它们的父级。在某些屏幕尺寸（主要是 mobile/tablet）上，您可能需要 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

将图像放置在椭圆形中

Place images in elliptic shape

css

position