使用 CSS 居中和裁剪图像

Posted 2023-03-06

【中文标题】使用 CSS 居中和裁剪图像

【英文标题】：Center and crop image with CSS

【发布时间】：2018-04-13 11:24:59

【问题描述】：

我需要使用 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 模式下使用设备时

运行时代码：

【问题讨论】：

你可以使用css背景图片吗？

这里使用设备的相机并将其显示给用户。 @JacobGoh

试试object-fit: cover图片标签

该放在哪里？ @Nimsrules

到img标签

【参考方案1】：

你可以通过

img 
    object-fit: cover;

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

Reference