My website has an image with dimensions of 955x955, which is a square size. I want this image to be responsive on all devices, but the section it's in is not squared. This causes the image to look distorted when viewed on smaller screens. The focus of the image is "the man," and I want to ensure that he remains centered regardless of the device used to access my website. I aim for the image to appear as shown on the right.
Here is the code snippet:
img{
max-width:100%;
max-height:100%;
vertical-align:middle;
object-fit:cover;
}