84
Views
2
Comments
Solved
Cropped photo
Question

I'm using the Login Info Webblock to display an image of the user but this image is stretched, instead I would like to crop this photo so it display a better aspect ratio.

Solution

Couple of different options in CSS depending on exactly what you want. 

If you want to maintain the same size and just crop try using the object-fit CSS

https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

or you can use the clip CSS property

https://www.w3schools.com/cssref/pr_pos_clip.asp

Or if you are resizing and just want to keep the aspect ratio then try this

https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio




Rank: #6275

Hi,

Forced CSS works well where you can control width and keep height as an auto. It will help to maintain aspect ratio without affecting quality or size.

For image compress and other things, https://www.outsystems.com/forge/component-overview/7180/image-utils-reactive works very well for Mobile apps in both online and offline mode.

Style for upload:

"display: block;
width: 200px;
  height: auto;
  position: relative;
overflow: hidden;"

Style for Image:

"display: block;
  width: 100%;
  height: auto;
object-fit: contain;"