图片变成圆形

我想把插入的网络图片变成圆形的图片可以么？ 现在图片是方形的

要先处理好图片，本身是圆形的图片

再用一个图片组件作为相框

方便直接处理成圆角最好。如果不方便处理的话，拉一个文本组件，然后写hmtl+css 试试看。这个需要自己调整，需要点html基础

1. <title>圆角图片</title>
   
2.     <style>
   
3.         .rounded-image {
   
4.             width: 200px; /* 设置图片宽度 */
   
5.             height: 200px; /* 设置图片高度 */
   
6.             object-fit: cover; /* 保证图片按比例填充并保持圆形 */
   
7.             border-radius: 50%; /* 设置图片四个角为圆形 */
   
8.         }
   
9.     </style>
   
10. 
    
11.     <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="Baidu Logo" class="rounded-image">
    
12. 
    

复制代码

yhbi老6了 发表于 2024-11-22 10:28
方便直接处理成圆角最好。如果不方便处理的话，拉一个文本组件，然后写hmtl+css 试试看。这个需要自己调整 ...

你这个的原理就是把文本组件变成圆形，然后图片附在里面是这个意思把？

yhdata_3NosmMBD 发表于 2024-11-22 10:30
你这个的原理就是把文本组件变成圆形，然后图片附在里面是这个意思把？ ...

不是，是利用文本组件可以写html+css的特性，来帮你实现特殊要求。如果没有html基础，或者没有精力研究，就不建议你折腾了。

yhbi老6了 发表于 2024-11-22 10:52
不是，是利用文本组件可以写html+css的特性，来帮你实现特殊要求。如果没有html基础，或者没有精力研究， ...

是的哦