hey folks, I am having an issue wherein I don’t know how to prevent the aspect ration of pictures from changing in the preview.
I have a list of url images all of which are different size and size rations, and I am trying to contain them in a fixed-size container such that image always fits in the container, but is never stretched or squeezed. White space is fine in the container.
Any tips would be helpful as have been trying everything!
Kieran
Can we see some screenshots?
sure, all of these images a screenshots of the same red square:
these are the original images:
Do you use these as a background image or a regular image?
In any case you can change ‘Fit’ for image or ‘Fill’ setting for background-image to ‘Contain’ or ‘Cover’
1 Like
Yeah, you need to use cover. That’s one option. Or you’d need to make the images respect the aspect ratio of the element you’re inserting them in. Now you’re inserting mostly landscape img into portrait element. If you check out the last img, that fits well.
So there is two approaches
-
Use cover property on the image/element BG - will result in a crop.
-
Size your images properly, according to the size of the elements
1 Like
oh right! thanks a lot