Jump to content
  • Design Issue: Gallery Album Brick Layout Displaying Strange BG Color


    Dreadknux
    • Status: Moved to Github

    Put up a test album, and added a bunch of images to it. When browsing it, I noticed the last two images in the album have been resized down and given a huge border (or the grid item has been given a strange background-color).

    Could contain: Art, Collage, Motorcycle, Transportation, Vehicle

    In the above example, it only appears when the browser window is expanded to view the full-width of the site, but if you're looking to replicate YMMV (might appear on larger screen sizes, may not appear on smaller).

    Checking the CSS, I noticed the background for the grid was given, for the figure:

    background: oklch(40% calc(var(--i-base-c) * 40%) var(--i-base-h));

    ...while the images themselves were given:

    object-fit: scale-down;

    Ideally, the images wouldn't be scaled down and they'd fill the entire space of the light blue color displayed in the image above.


    User Feedback

    Recommended Comments

    Hi @Dreadknux

    What's the URL to that page?

    The only time images shouldn't fill the entire rectangle is when they're smaller than the rectangle. Imagine uploading a small 64x64 pixel emoticon. If it filled the entire rectangle, it would be incredibly pixelated, so instead, it's shown at its native size (which is what scale-down does).

    So at the moment, my guess is those 2 images are quite small in size (smaller than the rectangle which they're placed in). If this is true, then the above is working as intended and this isn't a bug (although I do agree that the blue is quite intense).

    If the images are bigger than that rectangle, then I'll take a closer look for you.

    Link to comment
    Share on other sites

    13 hours ago, Ehren said:

    Hi @Dreadknux

    What's the URL to that page?

    The only time images shouldn't fill the entire rectangle is when they're smaller than the rectangle. Imagine uploading a small 64x64 pixel emoticon. If it filled the entire rectangle, it would be incredibly pixelated, so instead, it's shown at its native size (which is what scale-down does).

    So at the moment, my guess is those 2 images are quite small in size (smaller than the rectangle which they're placed in). If this is true, then the above is working as intended and this isn't a bug (although I do agree that the blue is quite intense).

    If the images are bigger than that rectangle, then I'll take a closer look for you.

    Hi Ehren

    Do you mind if I DM you the details? This is taking place on a private test instance on my own server (not the alpha preview instances provided by Invision), and access is passworded.

    To answer your question though, I can confirm those two images in particular are quite large in size (you should be able to see when you navigate to those images directly).

    Link to comment
    Share on other sites


×
×
  • Create New...