使用CSS中心和裁剪图像

Question

我需要使用CSS中心和裁剪图像.我已经按照这篇文章.但设备UI输出有些不同.你能解释一下这种行为吗？

这是用例:

我们不想实际裁剪 - 只显示图像的中间部分.人们上传的一些文档将是文档,所以不要让它被拉伸.

我的问题是我不知道为什么它转换(1图像)landscape模式,即使我使用portrait模式获得图像？任何解释？

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>

用户界面:

1- 它显示我在portrait模式下使用设备的时间

2- 当我在landscape模式中使用设备时

运行时代码:

Answer 1

你可以实现它

img {
    object-fit: cover;
}

它的工作方式相同,background-size: cover但它用于img标签而不是背景图像

参考