如何用 CSS 显示图像的一部分？

Question

我有一张用作横幅的图片，尺寸为 1400x350，我想显示其高度的 80%。我不想缩放图像，我只需要显示它的一部分。想象一张汽车的图片，我想从轮胎的正上方向上显示。

我发现的所有内容都显示了如何缩放或调整图像大小，但仍然显示 100% 的原始图像。我只想显示原始图像的一部分。我可以在图像编辑器中手动裁剪图像，但我希望能够使用 CSS.

我目前正在 div 中使用它作为背景。

div.banner {
    content: url('../Images/banner.jpg');
    background-color: #A5B7C7;
}

<div class="banner"></div>

Answer 1

这可以简单地通过设置background-position: center bottom;来实现。如果您的容器现在小于背景图片，它只会隐藏在顶部，因为它与底部对齐。

在此示例中，背景图片高度为 400px，但容器高度仅为 300px:

.banner {
  background: url('https://place-hold.it/300x400');
  background-position: center bottom;
  height: 300px;
  width: 300px;
}

<div class="banner"></div>

Answer 2

您可以通过背景位置进行调整以获得您想要的图像的一部分。

Answer 3

您可以通过使用剪辑属性来实现此目的，为此您需要保持绝对位置或固定位置 http://www.w3schools.com/cssref/pr_pos_clip.asp

这里是您的图片示例：http://jsfiddle.net/2U3CE/1/

    img{
        position:absolute;
        clip:rect(0,73px,73px,0);
       }

How to display a portion of an image with CSS?