从顶部裁剪图像 [英] Crop image from the top

问题描述

通过设置图像容器的 overflow:hidden 属性，很容易从底部，左侧或右侧裁剪图像.

It's pretty easy to crop an image from the bottom, left or right by setting the overflow: hidden property of the container of the image.

<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>

有什么方法可以从顶部裁剪图像?如果要调整窗口大小，并且图像不再适合容器的高度，则应从顶部而不是底部裁剪图像.

Is there any way to crop the image from the top? If the window is being resized and the image cannot fit into the height of the container anymore, the image should be cropped from the top instead of from the bottom.

推荐答案

向div容器(和高度)添加 position:relative; .

Add position: relative; to the div container (and a height).

然后添加 position:absolute;底部: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" />

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