CODEWITHSUNDEEP
htmlcss
The Codesee
The Codesee

Reputation: 3783

Reduce height from top and bottom of div (not just bottom)

I have a <div> with an <img> inside of it and am making the image's height decrease to the size of the div.

When I decrease the size of the <div>, it removes some of the bottom of the image as it's inside a container with a fixed height and the overflow is hidden, which is alright - as that's what I want it to do. However, I would also like to remove some of the top of the image also.

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

If you run the code snippet, you can see an example of what I mean.

JsFiddle: https://jsfiddle.net/6rqzy5pL/

Upvotes: 0

Views: 3632

Answers (2)

user5937446
user5937446

Reputation:

Try:

CSS:

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

Upvotes: 0

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

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>

Upvotes: 3

Related Questions