Image Cropping and Positioning

[Iraja_24]

Hi guys. I’m trying to crop this image on my gallery which I created using visual composer in wordpress. Basically the image has been resized to 500×500 from it’s original 500×1080. The problem is somehow either the wordpress on the visual composer centers the image after its been cropped/resized. However I want to make the image to be shown from the top and cropped the bottom part of the image. Here is my website https://smeweb-solutions.com/?page_id=3862. If you scroll down and see the 4 sample images of the person, you can clearly see the images are centred after they’re cropped but I want the images to be shown from the top. Is there anyway to make this happen in CSS? It’s driving me crazy. If you can help, it would be greatly appreciated. Thanks.

[giudev]

Your images are cropped by wordpress, so css can’t help you since the image is already shown at its maximum
https://smeweb-solutions.com/wp-content/uploads/2016/08/7fZ9laU-500×500.jpg

First you should display them at their original sizes and then you can play a bit with css.

You could go both for background-image and background-position properties or try to use object-fit and object-position properties like explained here:
https://www.sitepoint.com/using-css-object-fit-object-position-properties/

[Author]

Posts