Css | image Vertical

[vulkanus]

Hi,

Can anyone help me with this issue.
I have a div class=”imgV” and a img inside with this class:

.imgV { max-width: 540px; max-height: 263px; background: white; object-fit: cover; animation: ltr 3s alternate infinite; width: 100%; height: 100%;}
.imgV img { width: auto; overflow: hidden; overflow-y: hidden; position: absolute; display: inline-block; vertical-align: middle;}

and other div class=”article-content-wrapper” … below with:
.article-content-wrapper { width: 100%; height: auto; border-top: 1px solid #ccc; padding-bottom: 15px; margin-top: 15px; margin-top: 72%;}

and the images vertical is bigger then horizontal images more or less -159px. In full browser is OK, but when reduce, the image get out vertical, didn´t fit correctly.

How can I put parte of the image hidden?
Thank you in advance.

[Paulie_D]

It’s hard to understand your issue from the little you have given us.

Could you make a demo in Codepen.io with just enough code to show the problem?

[vulkanus]

Hi, thk for your reaply. I will try it.

[vulkanus]

Please: https://codepen.io/anon/pen/NawaBO

This is what I can do without the rest of css code from full page.

The diferente is the first image is Vertical, and I use the max-height: 253px (but in codepen, I have comment) to you see what happens to the site posts.

Thank you

[JeroenR]

The property overflow only works on an item with a height set. Your div with class ‘imgV’ has the property overflow set, but it doesn’t have a height. So that’s why it doesn’t work.
And overflow should be set on the container, not on the item itself, so you shouldn’t set it on the image itself.

So make sure your containers have the same dimensions in all screens, then the images will have those dimensions as well.

[vulkanus]

Hi @JeroenR,

Thank you.
I allready have resolved the issue with your tips, and understand what was wrong.

best cumps.

[Author]

Posts