使用 CSS 居中和裁剪图像

Question

我需要使用 CSS 对图像进行居中和裁剪。我关注了this article。但是设备 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 标签而不是背景图像

Reference