将图像放置在椭圆形中[关闭]。

Question

封闭. 这个问题需要更多 集中. 目前不接受回答。

---

想要改进这个问题？ 请通过以下方式更新问题，使其只关注一个问题。编辑本帖.

封闭 2个月前.

改进这个问题

Hei，我想知道是否有一种更简单的方法可以在CSS中把一些图片排列成椭圆状，就像你在下图中看到的那样（稍微向右转）。

我曾试过在每张图片上使用绝对位置，但那在调整大小和缩放时不会是一个流畅的架构。尝试上Adobe Illustrator，创建一切，导出为SVG，但结果我得到一个透明的盒子周围，不能让我正确地缩放圆圈。

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

Answer 1

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

你可以在图像上设置50%的边框半径，使它们成为椭圆形，但要确保它们的比例是正方形的。非正方形的图像不会形成一个完美的圆形。比如说，你可以在图片上设置50%的边框半径，使其成为椭圆，但要确保它们的比例是正方形的。

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

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

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

你可以使用的另一个选项，但对浏览器的支持不那么深入，就是剪辑路径。你可以实现同样的效果，但如果你想的话，还可以为它添加过渡动画。

例子:在div上设置一个背景图片，并添加剪贴路径属性。

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

来源：剪贴路径MDN剪贴路径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.

来源： nth-child