Hello guys, 

I can make the rectangular figure round, but it stays distorted, how can I fix this problem with OutSystems?


The Style Properties applied was:

border: 2px solid #ff9232;

border-radius: 50%;

height: 50px;

width: 50px;



Best Regards, 

Jessica Marques. 

Hi Jessica,

If you want make rectangular  figure create a class and applied on image like below-

.rectangularImg{

border: 2px solid #ff9232 !important;

border-radius: none !important;

height: 50px !important;

max-width: 50px !important;

width: 50px ;

}


Hope this will help you.

Regards

Rahul Sahu

Solution

Hi Jessica,

this is not a matter of fixing it with outsystems, it is a simple matter of squashing a rectangular image into a square by setting both width and height. 

In CSS, you can solve this by using 

object-fit: cover;


that will take a bit of image away on the long side, making it same height and width.  So for images where the important bit is shown in the centre, like portraits of people, this should be fine.


Happy coding,

Dorine

Solution

Dorine Boudry wrote:

Hi Jessica,

this is not a matter of fixing it with outsystems, it is a simple matter of squashing a rectangular image into a square by setting both width and height. 

In CSS, you can solve this by using 

object-fit: cover;


that will take a bit of image away on the long side, making it same height and width.  So for images where the important bit is shown in the centre, like portraits of people, this should be fine.


Happy coding,

Dorine

Perfect, that's it!

Thanks!


Regards, 

Jessica Marques.