使用CSS中心和裁剪图像

Question

我需要使用CSS中心和裁剪图像。我跟着this article。但设备UI输出有些不同。你能解释一下这个行为吗？

这是用例：

  

我们不想实际裁剪 - 只显示图像的中间部分。   人们上传的一些文档将是文档，因此不希望这样   被拉伸。

我的问题即使我使用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

UI：

portrait - 显示我在2模式

中使用设备的时间

landscape - 当我在local public state模式下使用设备时

运行时代码：

Answer 1

你可以通过

实现它

img {
    object-fit: cover;
}

它与background-size: cover的工作方式相同，但它用于img代码而非背景图片

Reference