我有一张图片用作1400x350的横幅，我想显示其高度的80％。我不打算缩放图像，我只需要显示它的一部分。想象一下汽车的图片，我想从轮胎正上方展示。
我发现的所有内容都展示了如何缩放或调整图像大小，但仍能显示100％的原始图像。我只想显示原始图像的一部分。我可以在图像编辑器中手动裁剪图像，但我希望能够用CSS做到这一点。
我现在用它作为div的背景。
div.banner {
content: url('../Images/banner.jpg');
background-color: #A5B7C7;
}
<div class="banner"></div>
答案 0 :(得分：3)
这可以通过设置background-position: center bottom;来实现。如果您的容器现在小于背景图像，它只会隐藏在顶部，因为它与底部对齐。
在此示例中，背景图像高度为400px，但容器高度仅为300px：
.banner {
background: url('https://placehold.it/300x400');
background-position: center bottom;
height: 300px;
width: 300px;
}<div class="banner"></div>
答案 1 :(得分：1)
您可以使用clip属性来实现此目的，为此您需要保持绝对位置或固定位置 http://www.w3schools.com/cssref/pr_pos_clip.asp
以下是您的图片示例：http://jsfiddle.net/2U3CE/1/
img{
position:absolute;
clip:rect(0,73px,73px,0);
}
答案 2 :(得分：0)
你可以通过背景位置进行调整，以获得你想要的图像的一部分。