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

问题描述

我需要使用 CSS 对图像进行居中和裁剪.我已关注

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

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

运行时代码:

解决方案

你可以通过

img {适合对象:封面；}

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

参考

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.

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>

UI:

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

2 - when I used device in landscape mode

Runtime code:

解决方案

You can achieve it by

img {
    object-fit: cover;
}

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

Reference

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