355
Views
4
Comments
Image Scatters
Question

Hi All,



I am using Outsystems default template for showing user profile, shown below.


I can update the picture.

Since the image is in circular format i have used following css to achieve this.

img.img-circle {
    border-radius: 50%;
}

But for certain image resolutions, the image uploaded gets scattered, as shown below.

Can anyone tell me how can i achieve this, so that it can handle any resolution of images.


Thanks,

DM

2021-09-10 14-03-53
Salman Ansari

Hi Dhiraj,


Would t be possible to share oml for this screen only,So that we can look into it

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Hi Dhiraj,

If you want to restrict the image size on your site, without your application resizing the image to an optimal size, then you can use the CSS properties width and height. Set them to the same value of your choice.

Btw. in OutSystems UI the CSS for circle image is alraedy available

img.img-circle {
    border-radius: var(--border-radius-circle);

}

So you do not have to add that yourself. 

Regards,

Daniel

2019-10-04 15-01-22
Dhiraj Manwani

Hi,


I want following kind of implementation, can anyone suggest?

Thanks,

DM

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Hi Dhiraj,

Ok what you described in your last post, I could not derive from your original post.

So you want the user to be able to crop the picture and then save it.

I would like to suggest to have a look at the following mobile plugin:

https://www.outsystems.com/forge/component-overview/5000/cordova-crop-plugin

which has also a sample application on how to use it:

https://www.outsystems.com/forge/component-overview/5001/cordova-crop-plugin-sample

Regards,

Daniel


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.