在离子反应应用程序中制作离子图像的边界半径答案

【问题标题】：make border radius of ionic image in ionic react app在离子反应应用程序中制作离子图像的边界半径
【发布时间】：2021-10-27 20:27:16
【问题描述】：

我正在制作一个离子反应应用程序。我无法制作离子图像的边界半径。帮我解决问题。
这是我的js文件代码：

import { IonGrid, IonImg } from '@ionic/react'; 
import './aboutUs.scss'; 

const AboutUs = () => {
return (
        <IonGrid className="about-us">
            <IonImg className="about-image" src="https://cutt.ly/MWaU9I0"></IonImg>
        </IonGrid> 
       );
     };

export default AboutUs;

这是我的scss文件代码：

.about-us{
padding: 1.25em;
  .about-image{
    border-radius: 5em;
  }
}

【问题讨论】：

这能回答你的问题吗？ How to add border-radius to ion-img in Ionic 4

标签： css reactjs ionic-framework

【解决方案1】：

您很可能希望将其设置为重要，以覆盖离子默认值并隐藏溢出，即：

.about-us{
  padding: 1.25em;
  .about-image{
    border-radius: 5em !important;
    overflow: hidden;
  }
}

根据这里的重复：

How to add border-radius to ion-img in Ionic 4

【讨论】：