Help cropping an image an keeping its center when resizing the window

[gabriellcarpes]

I have an image tag (containing a .png) that spans the width of my viewport. When I resize it I want it to be cropped with the png’s center fixed on the center of the page, however it crops relative to its top-left point. The image is inside a as well

The image is part of a bootstrap carousel and it’s supossed to be the promotional banner of a website. I’ve tried using the image as a background-image and it worked exactly as I wanted, but I’d prefer to use an image tag for this (acessibility and other control preferences). I’ve also tried the object-position property on CSS and it didn’t work (I applied it to the image)

I also made a small image describing the current behavior and the desired one https://imgur.com/a/TrgAo0w . Thank you!

[Beverleyh]

It would be easier for us to offer help if you could provide a reduced demo in CodePen.

Unfortunately we can’t diagnose a diagram. We need the live code.

[Author]

Posts