Fix for squished avatar images

Post by **chloevee** » Thu Apr 17, 2025 12:38 am

I haven't tested in browsers other than Chrome, but on the View Profile page I noticed that avatar images are often squished. (Or is it just me?) I wrote some CSS that fixes it.

(If admins are interested and don't know how to add custom CSS I can bundle it into a phpBB style that can be more easily installed.)

No hard feelings if this is not wanted or not a priority. Feel free to disregard.

Before:

After:

CSS:

Code: Select all

/*
 * Modificatons to phpBB purplexion theme.
 * https://www.phpbb.com/customise/db/style/purplexion/
 *
 */
body.section-memberlist {

  /*
   * View Profile page
   *
   * - Don't squish avatar image.
   * - Improve the layout of avatar image (left) and details (right).
   * - Improve the layout of details (Username, Groups, etc) on narrower
   *   screens.
   */
  form#viewprofile {
    .panel.bg1:first-child .inner {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;

      .left-box {
        float: unset;

        &.avatar-rank-container {
          max-width: unset;

          .profile-avatar img {
            max-width: unset;
          }
        }


        &.profile-details {
          flex-grow: 1;

          display: grid;
          grid-template-columns: repeat(2, max-content);
          align-content: start;
          max-width: fit-content;

          dt {
            text-align: right;
          }

          &, dt {
            float: unset;
            clear: unset;
            width: unset;
          }

          dd {
            width: max-content;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

Post by **Claire** » Thu Apr 17, 2025 12:46 am

I hadn't noticed that before, thanks for letting us know. And even more so for providing us a fix for the issue, it's much appreciated.

I hadn't encountered the issue before, but when I open a profile on my PC and adjust the size of the browser window it adjusts the size of the avatar dynamically to make it fit better, I suppose. Maybe you encounter that resizing of avatars more often in mobile view.

I'll talk about this with @Vela Nanashi and test your fix on my test forum to see whether it causes any issues. Thanks for the help!

Post by **Vela Nanashi** » Fri Apr 18, 2025 6:04 am

Should I believe be able to simply add a single global css rule to all images:

img { object-fit: contain; }

Yep tested that on w3schools try it https://www.w3schools.com/css/css3_object-fit.asp that will make the image fit inside the intended containers without stretching it will just touch the inner edges, like it should.

You can paste this code into their try it editor and experiment with width and height on the image itself, to see it obeying that. It is the only object-fit I personally want us to use, it can also cut the sticking out bits off, and that is not what I want at all, as it hides part of the image.

Code: Select all

<!DOCTYPE html>
<html>
<head>
<style>
img {
  object-fit: contain;
}
</style>
</head>
<body style='background: black; color: white;'>

<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="200" height="300">

</body>
</html>

Post by **Vela Nanashi** » Fri Apr 18, 2025 6:09 am

Also thanks for pointing this out to us and providing a fix. My fix is different, I did not like that the image pushed the other elements out of the way, it is fine if we make a new style/theme that does that, I am not sure if all images would push the same amount.

However we can maybe work on editing the theme/style later to make it waste less space for things that are not the main content

Post by **chloevee** » Fri Apr 18, 2025 6:53 am

Vela Nanashi wrote: Fri Apr 18, 2025 6:04 am Should I believe be able to simply add a single global css rule to all images:

img { object-fit: contain; }

That's a much more simple solution!

I tested it locally and it does indeed fix the problem on the profile page. Thanks for taking the time to address this!

Post by **Vela Nanashi** » Fri Apr 18, 2025 9:59 am

It may take a bit to show up on forum proper, but it was very good that you spotted the issue. I am happy to have observant and competent folks reporting what they see and even finding solutions. So thank you for that

Post by **Claire** » Wed Apr 23, 2025 6:06 pm

@chloevee It took a moment but the issue should be fixed now. Thank you so much again for making us aware of this. I'll give you some rep for this! And thx @Vela Nanashi for helping me implement the solution.

Post by **Vela Nanashi** » Wed Apr 23, 2025 6:08 pm

Can get a bit hectic sometimes to get to things, but it should be there now

also thanks again for reporting the issue, and coming up with a solution, please do so in the future too

at least reporting bit, you don't have to come up with solution though, but I loved that you did

Post by **chloevee** » Wed May 28, 2025 5:45 am

You guys rock!

Fix for squished avatar images

Fix for squished avatar images

Re: Fix for squished avatar images

Re: Fix for squished avatar images

Re: Fix for squished avatar images

Re: Fix for squished avatar images

Re: Fix for squished avatar images

Re: Fix for squished avatar images

Re: Fix for squished avatar images

Re: Fix for squished avatar images