Right now, the only method I found is to click on the expando, then right click on the image and open it in a new tab. Is there a way to make it so I can just click it once? I can’t imagine any possible scenario where I’d want to see a large but not full size image.

I’m using the browser on my computer if that’s relevant.

Edit: I got it to work using the Stylus addon and:

.img-expanded:not(.banner, .avatar-overlay) {
    max-height: unset;
    max-width: 100vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    outline: auto;
    outline-color: black;
    z-index: 1;
}

I also made it outline any expandos with:

/*Note: Links are exactly the same except without bg-transparent, so using not(bg-transparent) instead will outline the links instead of the expandos. Also, they're outlined orange unless you change it, so you could take that off, give them all outlines, and you can tell which they are based on the color.*/
.thumbnail.rounded.overflow-hidden.d-inline-block.position-relative.p-0.border-0.bg-transparent {
    outline: auto;
}
  • _HR_@lemmy.world
    link
    fedilink
    English
    arrow-up
    1
    ·
    1 year ago

    This will allow maximum expansion, but will somewhat break display of the sidebar:

    .col-lg-9, .col-md-8 {
        width: unset;
    }
    
    .container-lg, .container-md, .container-sm, .container {
        max-width: unset;
    }
    
    .offset-sm-3 {
        margin-left: unset;
    }
    

    I’ve only tested with a few !pics@lemmy.world posts, and couldn’t quickly find whether this would affect images in comments.

    • Archpawn@lemmy.worldOP
      link
      fedilink
      English
      arrow-up
      2
      ·
      1 year ago

      Changing .img-expanded { max-height: unset; } to .img-expanded:not(.banner):not(.avatar-overlay) { max-height: unset; } Fixes the banner and Lemmy icon, since they’re listed as .img-expanded for some reason. I’m hoping to figure out how to make it overlay the image on top of the sidebar, or at least only push it away while the image is opened.

      How is this not a solved problem? Am I the only person who cares about seeing the image at a larger resolution?

      • _HR_@lemmy.world
        link
        fedilink
        English
        arrow-up
        2
        ·
        1 year ago

        Nice.

        How is this not a solved problem?

        Tradeoffs I’d imagine. Lemmy devs need to prioritize between lots of things that absolutely need to be addressed first (like the recent vulnerabilities), and as a result relatively “minor” issues like this gets stuck on the sidelines. In addition to that, “beauty is in the eye of beholder”, so spending development time on this stuff when it might not even be acceptable to people is… well, wasteful.

        That being said, the code is open source, so anyone can help and contribute improvements/fixes.

        Am I the only person who cares about seeing the image at a larger resolution?

        Definitely not. I didn’t quite realize just how much of a difference this would make, but now that I’ve added it to CSS overrides it does make a huge difference. Thanks for pointing it out.

        • Archpawn@lemmy.worldOP
          link
          fedilink
          English
          arrow-up
          3
          ·
          1 year ago

          It’s not just a Lemmy thing. Imgur has the same problem too, and the only reason it exists is for images.

          Anyway, I don’t think this fix is ideal, but I’m going to head to a CSS community to get it working properly.

          • Archpawn@lemmy.worldOP
            link
            fedilink
            English
            arrow-up
            1
            ·
            1 year ago

            I improved the fix and edited the post to show it. Now it doesn’t mess with the sidebar and leaves the margin on the left for everything but images. And I added something to outline expandos. I’m tired of accidentally opening links. I really wish they weren’t opened the same way, but that’s not something i can fix with CSS.

    • _HR_@lemmy.world
      link
      fedilink
      English
      arrow-up
      1
      ·
      1 year ago

      For images inside comments (also can break sidebar):

      .md-div img { max-height: unset; }