使用CSS对中和裁剪图像 [英] Center and crop image with CSS

问题描述

我需要使用CSS对中和裁剪图像.我已关注> 本文 > .但是设备UI输出有所不同.您能解释一下这种行为吗?

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.

我的问题，即使我使用portrait模式获取图像，我也不知道为什么它会转换(1图像)landscape模式吗?有什么解释吗?

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>

用户界面:

1-当我在portrait模式下使用设备时显示

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

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

2 - when I used device in landscape mode

运行时代码:

推荐答案

您可以通过

img {
    object-fit: cover;
}

它与background-size: cover相同，但是用于img标签而不是背景图片

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

参考

这篇关于使用CSS对中和裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！