Nativescript: object-fit to image

Created on 10 Oct 2018  路  3Comments  路  Source: NativeScript/NativeScript

Is your feature request related to a problem? Please describe.
I'm traing to make an agnostic component where people will pass some image and I'm will display. This is the component that I'm traing to make:

image

This icon image is not been circle with this:
```
stretch: fill;
width: 40;
height: 40;
border-width: 1;
border-color: red;

I found this issue #4722 but the problem is not solving here.

**Describe the solution you'd like**
An solution like this:
    width: 40;
    height: 40;
    border-radius: 100%;
    object-fit: cover;
**Describe alternatives you've considered**
For now I have this: 

 ```
  <GridLayout class="card-list-wrapper" *ngFor="let menu of menuItems" row="*, *" columns="*, *, *, *" (tap)="goTo(menu.goTo)">
        <Label col="0" class="color-indicator"  horizontalAlignment="left"></Label>
        <Image col="0" src="~/images/SNS24.png" verticalAlignment="center" horizontalAlignment="left" class="thumb img-rounded m-l-16"></Image>
        <Label col="1" colSpan="3" verticalAlignment="top"    [text]="menu.title"     class="title m-b-10 p-t-16" textWrap="true"></Label>
        <Label col="1" colSpan="2" verticalAlignment="bottom" [text]="menu.subTitle"  class="description m-t-10 p-t-16" textWrap="true"></Label>
        <Label col="4" horizontalAlignment="right" text="&#xf105;" class="icons m-l-10 m-r-10 m-b-10 m-y-auto"></Label>
 </GridLayout>

the problem with the image persist

Additional context
here is the project in playground: https://play.nativescript.org/?template=play-ng&id=9lfL4w

Most helpful comment

Sorry, I have found the solution:

.thumb {
    stretch: fill;
    width: 40;
    height: 40;
    border-width: 1;
    border-color: red;
    border-radius: 100%;
}

All 3 comments

@ronaiza-cardoso I've loaded your Playground demo but it is not quite clear what the issue with the image is... can you please clarify?

Note that NativeScript supports a subset of CSS so not all CSS properties will work. For-example object-fit is not supported.

Sorry, I have found the solution:

.thumb {
    stretch: fill;
    width: 40;
    height: 40;
    border-width: 1;
    border-color: red;
    border-radius: 100%;
}

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

fmmsilva picture fmmsilva  路  3Comments

rLoka picture rLoka  路  3Comments

Pourya8366 picture Pourya8366  路  3Comments

vtisnado picture vtisnado  路  3Comments

OscarLopezArnaiz picture OscarLopezArnaiz  路  3Comments