40% OFF EVERYTHING
BLACK FRIDAY SALE
Buy Now

Featured Image – auto sizing

This topic contains 4 replies, has 3 voices, and was last updated by  Stiofan O’Connor 6 years, 3 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: , ,

  • Author
    Posts
  • August 15, 2018 at 8:22 pm #442561

    Brian Stensrud
    Free User
    Post count: 16

    Hi there,

    Using Directory Starter and it’s child theme, I’ve noticed that I cannot get the featured-image to auto-scale. It does switch to a smaller full size image at certain viewport break points, but I really prefer it to just keep scaling down. I’m able to do this with css for most images and I suspect that the “parallax” is preventing my normal approach from working.

    Are you aware of how to accomplish this ?
    much appreciated
    b. stensrud

    August 15, 2018 at 10:23 pm #442585

    Paolo
    Site Admin
    Post count: 31206

    Hi,

    I’m not entirely sure I understand what the problem is.

    It does not switch to a smaller full size image at certain viewport break points as far as I know. The size of the image is always the same and we only resize the height with CSS.

    If you give us a better idea of what you are trying to achieve, we’ll try to help out.

    Thanks

    August 15, 2018 at 10:40 pm #442589

    Brian Stensrud
    Free User
    Post count: 16

    Hey Paolo – thanks for the quick response 🙂

    I’m only guessing about the switching to smaller sizes – you’re probably correct.

    However, when I resize my screen, the image does shrink ( but not scale ), and at 2 or 3 breakpoints, it then shows as full size again – but scaled properly to the screen size. In other words, there is a definite “jump” to a re-scaled image.

    I want to be able to re-size the screen and have the image smoothly auto-size itself per the screen size.

    Please check this simple code-pen example I have just created that visually shows what I’m trying to do : https://codepen.io/stensrbr/pen/PBvvGJ

    thanks again
    b
    🙂

    August 15, 2018 at 11:12 pm #442592

    Paolo
    Site Admin
    Post count: 31206

    The featured image is the background of a div, not a tag within a page. The image is taller than the div and part of it is hidden, so that scrolling you can have the background parallax effect.

    I don’t think what you want can be done only with some custom css.

    I think you’ll need to remove the current featured area HTML and instead add a regular banner image.

    I asked to the developers to either confirm my suspects, or let us know how they would tackle this.

    Thanks for your patience,

    August 16, 2018 at 11:37 am #442674

    Stiofan O’Connor
    Site Admin
    Post count: 22956

    I’m still not entirely sure what you are trying to achieve, the image is not supposed to be sully visable, this is so we can apply a prallax effect, this parallax effect is less and less as the screen shrinks but i don’t see any image jump like u mention? Can u tell me how to recreate the problem?

    Stiofan

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount