CSSを使用した画像の中央と切り抜き

Question

CSSを使用して画像を中央に配置して切り抜く必要があります。私はthis articleに従っていますが、デバイスのUI出力は多少異なります。あなたはこれの行動を説明できますか？

これは、ユースケースである：

私たちは、実際にトリミングする必要はありません - ちょうど画像の真ん中を表示します。 ドキュメントの一部はアップロードされますので、 に伸ばしてもらいたいとは思わないでください。

私の質問はそれが私がportraitモードを使用して画像を得たにも関わらず（1画像）landscapeモードを変換し、なぜ私にはわからないのですか？説明は？

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 - とき、私たち - 私はportraitモード

2でデバイスを使用するときには示していlandscapeモードのEDデバイス

ランタイムコード：

Answer 1

は、あなたはそれがbackground-size: coverと同じように動作しますが、代わりに背景のimgタグのために使われています

img { 
    object-fit: cover; 
} 

ことによってそれを達成することができます画像

Reference