降低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%);
}