Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #260899
    vulkanus
    Participant

    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.

    #260900
    Paulie_D
    Moderator

    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?

    #260901
    vulkanus
    Participant

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

    #260907
    vulkanus
    Participant

    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

    #260978
    JeroenR
    Participant

    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.

    #261419
    vulkanus
    Participant

    Hi @JeroenR,

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

    best cumps.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.