Display 90% of the image height using CSS?

Alsaraha 0
Viewed 39

I want to hide the bottom part of the image and only display the top 90% of the image,

I've tried to use

transform: translateY(10%);

and adding to the parent div the following property:

overflow: hidden;

but this makes an empty 10% on top of the image, I do not want empty space on top of the image how can I achieve that?

css
2 Answers

You could absolute position the image in a relative container with overflow: hidden. Just make sure the parent div is actually 90% of the height and the image is positioned top: 0%.

chrisjung0

If you want to do it this way, I would suggest that you set the height of the image to 110% instead of 90%:

HTML:

<div class="image-container">
    <img src="...">
</div>

CSS:

.image-container {
    background-color: steelblue;
    height: 600px;
    overflow: hidden;
}

.image-container img {
    height: 110%;
}

or if you know the size of the image, you can use object-fit and object-position. Let's say that the height of the image is 500px, then 90% of it would be 450px, then your css would be:

.image-container img {
    height: 450px;
    object-fit: cover;
    object-position: top;
}
nourhomsi0
Related