css - 将图像放置为椭圆形

问题描述

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

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

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

标签： cssposition

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

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

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

浏览器支持（大多数浏览器）

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

您可以使用的另一个选项是剪辑路径，但浏览器支持的深度较低。你可以达到同样的效果，但如果你愿意，也可以添加过渡/动画。

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

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

来源：剪辑路径 MDN 浏览器支持

响应行为

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

如果您想在不同位置设置每个图像的样式，您可以在每个图像或 nth-child 选择器上使用不同的类：

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

资料来源：第n个孩子

css - 将图像放置为椭圆形

问题描述

解决方案

推荐阅读