How To Add Border-radius To Ion-img In Ionic 4
I need to add border-radius to ion-img but it seems shadow DOM won't let me modify. HTML CSS ion-img { border-radi
Solution 1:
The correct, non-obvious, way to do this is with CSS shadow parts.
In this case ion-img has a shadow part image
so our SCSS looks like:
ion-img::part(image) {
border-radius: 10px;
}
Yes, the part has no quotes and is the full word "image" (not "img" we need the part name, not the target tag name).
Solution 2:
HTML
<ion-img [src]="img-url"class="your-img"></ion-img>
CSS
.your-img {
border-radius: 10px!important;
overflow: hidden;
}
Solution 3:
- put the image inside of card
<ion-card><ion-imgsrc="imag"></ion-img></ion-card>
after that set the style of the image
set image with and heigth to 100% in
ion-img
stylemodify the value of radius in the ion-card component
Solution 4:
You can use:
<ion-avatar><ion-img [src]="item.image"></ion-img></ion-avatar>`
ion-avatar {
--border-radius: 10px;
}
Solution 5:
It's tricky to encapsulate style with Shadow DOM, but there are ways.
In this case, does it work for you with an inline style attribute?
<ion-img [src]="img-url" [alt]="alt" [style]="border-radius: 10px;"></ion-img>
Otherwise you might try adding a <style></style>
tag to the inner HTML of the Shadow DOM with the border radius.
A modified example from the attached link:
const host = document.getElementById('shadow-host');
host.shadowRoot.innerHTML = `
<style>
img {
border-radius: 10px;
}
</style>
`
Post a Comment for "How To Add Border-radius To Ion-img In Ionic 4"