降低div的顶部和底部的高度（不仅仅是底部）

Question

我有一个<div>，其中<img>在里面，并使图像的高度降低到div的大小。

当我减小<div>的大小时，它会删除图像底部的一部分，因为它位于具有固定高度的容器内，并且溢出被隐藏，这是正常的 - 因为这正是我想要的。不过，我也想删除一些图片的顶部。

<p>What the image first looks like:</p> 
 
<img src="https://upload.wikimedia.org/wikipedia/en/6/69/Stop_sign(standard).svg" width="140" height="150"> 
 
<p>What the image looks like after removing some of it by putting it inside the div:</p> 
 
<div style="overflow: hidden; padding: 0px; width: 140px; height: 120px;"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/6/69/Stop_sign(standard).svg" width="140" height="150"> 
 
</div> 
 

 
<p>But... I would like to remove some of the top of the stop sign also - not just the bottom!</p>

如果您运行的代码段，你可以看到我的意思的例子。

的jsfiddle：https://jsfiddle.net/6rqzy5pL/

Answer 1

div { 
 
    position: relative; 
 
} 
 

 
div img { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translatey(-50%); 
 
}

<p>What the image first looks like:</p> 
 
<img src="https://upload.wikimedia.org/wikipedia/en/6/69/Stop_sign(standard).svg" width="140" height="150"> 
 
<p>What the image looks like after removing some of it by putting it inside the div:</p> 
 
<div style="overflow: hidden; padding: 0px; width: 140px; height: 120px;"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/6/69/Stop_sign(standard).svg" width="140" height="150"> 
 
</div> 
 

 
<p>But... I would like to remove some of the top of the stop sign also - not just the bottom!</p>

Answer 2

尝试：

CSS：

.target_img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}