Not enlarge images to fit banner?

  • Resolved Alex T.

    (@polaatx)


    7 years, 11 months ago

    Hello Webbjocke,

    One problem with using the featured image as the banner is that the image has to have a 21:9 aspect ratio to fit well on a desktop. A 4:3 image does not do well because the image is enlarged to fit the width of the screen and loses its top and bottom.

    Here’s an example:

    screenshot

    So I had to stretch the canvas in photoshop to make a banner image like this:

    screenshot

    I have many other older posts which I will have to redo accordingly.

    My question is whether it would be more logical to have Satisfy NOT enlarge images to fit the width of the screen, but simply center them. Thereby, an 800×600 image would appear like the above example, in the middle of the screen with black on both sides.

    if the user wants edge-to-edge coverages, he/she can then upload 21:9 aspect ratio.

    Not sure if this is practical. haven’t really thought through the ramifications with larger image. Obviously the height has to constrained.

    If disabling enlarging image to fit edge-to-edge is not a huge hassle, please give me the code and I will try it and report back my results.

    • This topic was modified 7 years, 11 months ago by Alex T..
    • This topic was modified 7 years, 11 months ago by Alex T..
Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Webbjocke

    (@webbjocke)

    Hi thanks for your input. That’s actually a problem so I’ll see how this can be addressed in the next update. You could try the following css for now and see how that does it.

    #site-hero .cover-img{
    background-color: black;
    background-size: auto 100%;
}

    Or background-size:contain;

    Thread Starter Alex T.

    (@polaatx)

    Hello Webbjocke,

    The CSS your provided definitely works. But I decided not to use it. It’s because the constrained images then look weird on smaller screens.

    Like in the comparison below, with the constrained code to the left there are black borders on top and bottom. Without the code, it looks better.

    sc

    I am thinking it gets too complex to try to predict and target css for each screen size. Easier to just plan ahead when making featured image to make sure 4:3 images have been modified enough to avoid odd cutoffs (i.e. add borders in photoshop).

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Not enlarge images to fit banner?’ is closed to new replies.