[frogend/bug] Header is cut small on UXP-based web browsers depending on image

[EchedelleLR]

Describe the bug with a clear and concise description of what the bug is. Please include screenshots of any visual issues.

Currently, the headerimage is separated in a different element and not an actual background of basic.

This leads to the issue in which basic size and headerimage may be different, but for which height is dependent on headerimage to view the header properly of each user.

This is fixed in some web browsers by using aspect-ratio CSS feature, which is not supported in UXP-based web browsers by now.

This leads to a lower size picture cause headerimage to be too small to the point that the header is as a cut view.

What's your GoToSocial Version?

0.7.0

Browser version

Pale Moon 32.0.0

What happened?

Header is cut small on UXP-based web browsers if the header picture is too small.

What you expected to happen?

Header is properly showed with a good size on UXP-based web browsers regardless of the header picture height.

How to reproduce it?

Just load any a profile in any UXP-based web browsers with a picture with more length that height in an high proportioned way.

Anything else we need to know?

This may be fixed by enforcing a minimum height as showed in the following pictures:

This is a picture without the fix.

This is a picture with the fix. Enforcing a specific height is also valid but minimum height is good enough.

[f0x52]

we can't really just force a (minimum) height, the whole aspect-ratio thing is needed because we don't know how wide the profile container is, so we can't know what height the image will be for a 3:1 ratio

[EchedelleLR]

Mew...

[EchedelleLR]

In my example I have a very wide wide image and this just "zooms" it making it fit as expected which exactly gives the same effect of aspect-ratio...

Vertical images should fit too...

Aspect ratio is a CSS 4 property and things worked before this feature was a thing in a different way...

;-;

[handlerug]

Note to implementers: Before aspect-ratio was a thing, web developers enforced a constant aspect ratio using a quirk of the padding-top property:

<div class="header-wrapper">
  <div class="header">
    Here's some stuff
  </div>
</div>

<style>
.header-wrapper {
  position: relative;
  /* this is relative to the width, not height */
  padding-top: 56.25%; /* 9/16 * 100 */
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Images can be a background, though:

<div class="header" style="background-image: url(/banner.png)"></div>

<style>
.header {
  position: relative;
  /* this is relative to the width, not height */
  padding-top: 56.25%; /* 9/16 * 100 */
  background-position: center;
  background-size: cover;
}
</style>