css 怎么变成圆形图片吗

如何将一张图片变成圆形？

看起来简单，实际上需要用到CSS按钮技巧。首先我们将图片的边框半径设置为50%。边框不会被拉成椭圆形，因为图片的宽度和高度仍然是正方形的。然后我们用object-fit和object-position属性来控制图片在圆形边框内的大小和位置。

    img {
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
            width: 200px;
     /*自己设置图片大小*/        height: 200px;
    }

这就是将图片变成圆形的全部代码！

需要注意的是，如果您要使图像响应，您需要使用媒体查询来覆盖宽度和高度。另外，您可以将圆形图片包装在一个带有padding属性的容器中，以避免与其他元素重叠。

    .wrapper {
            text-align: center;
            padding: 50px;
    }
    .wrapper img {
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
    }
    

这就是如何使用CSS将一张图片变成圆形的全部内容！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！