Center and crop image with CSS

Question

I need to Center and crop image with CSS. I have followed this article.But device UI output is somewhat different. Can you explain the behavior of this?

This is the use case:

We don’t want to actually crop - just display the middle of the image. Some of the docs people will upload will be docs so don’t want this to be stretched.

My question is I don't know why it transforms (1 image) landscape mode even though I got the image using portrait mode? Any explanation?

photo {
    .photo {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        img {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100%;
            width: auto;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        img.portrait {
            width: 100%;
            height: auto;
          }
    }
}

<div class="photo">
  <img [src]="data?.url class="portrait">
</div>

UI:

1 - It shows when I used the device in portrait mode

2 - when I used device in landscape mode

Runtime code:

Answer 1

You can achieve it by

img {
    object-fit: cover;
}

It works the same as background-size: cover but it's used for img tags instead of background images

Reference