Css 从顶部裁剪图像

通过设置图像容器的

overflow:hidden

属性，可以很容易地从底部、左侧或右侧裁剪图像

<div class="img-container">
   <img class="img" src="/img.jpg" />
</div>

<style>
   .img-container {
       overflow: hidden;
       max-height: 700px;
   }

   .img {
        width: 100%;
        height: auto;
    }
</style>

.img集装箱{
溢出：隐藏；
最大高度：700px；
}
.img{
宽度：100%；
高度：自动；
}

---

有没有办法从顶部裁剪图像？如果正在调整窗口的大小，并且图像无法再适应容器的高度，则应从顶部而不是从底部裁剪图像。

添加

位置：相对到div容器（和高度）

然后添加
位置：绝对；底部：0到图像本身：


.img容器{
溢出：隐藏；
高度：100px；
最大高度：300px；
位置：相对位置；
}
.img{
显示：块；
宽度：100%；
高度：自动；
位置：绝对位置；
底部：0；
}

全图如下

另一个选项是将图像作为背景应用，然后将其定位在容器底部。应用
背景大小
以保留纵横比：


.img容器{
高度：100px；
宽度：100px；
背景：url(http://placekitten.com/400/500)无重复底部；
背景尺寸：100%自动；
}
试试
位置：绝对；底部：0这很有效，谢谢！很高兴它有帮助！