Question

通过设置图像容器的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>

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

Answer 1

将position: relative;添加到div容器（和高度）。

然后将position: absolute; bottom: 0;添加到图像本身：

.img-container {
       overflow: hidden;
      height: 100px;
       max-height: 300px;
       position: relative;
   }

.img {
	    display: block;
        width: 100%;
        height: auto;
        position: absolute;
        bottom: 0;
    }

<div class="img-container">
   <img class="img" src="http://placekitten.com/400/500" />
</div>

<p>Full image below</p>
   <img src="http://placekitten.com/400/500" />

Answer 2

另一种选择是将图像应用为背景，然后将其定位在容器的底部。应用background-size以保留宽高比：

.img-container {
  height: 100px;
  width: 100px;
  background: url(http://placekitten.com/400/500) no-repeat bottom;
  background-size: 100% auto;
}

<div class="img-container"></div>

从顶部裁剪图像

2 个答案: