[Feature Request] Resize webms/pictures/gifs exceeding user's window/certain resolution to fit constant size

[kakhulu31]

Webm/picture/gif containers often have resolutions that, on click/hover, expand to widths exceeding the user's entire viewport, making it impossible to watch without adjusting the zoom, opening in a new tab, or using a gallery. It would be beneficial to enforce some size constraints.
For instance, with constraints set at a width of 1280 and a height of 720, the desired behavior would be:
for a 1920x1200 video, resize the webm window to the smallest constraint (height, 720 in this case), then resize the other dimension (width) to preserve the aspect ratio (1920*720/1200). The resulting window size would be 1152x720.

I guess this is probably achievable with a simple user css script but I don't know it unfortunately.

[kakhulu31]

So far I'm using this css that seems to work fine, but it doesn't work for previews

.fileThumb video, .fileThumb img.full-image {
  max-height: 720px;
  max-width: 1280px;
  object-fit: contain;
}

[saxamaphone69]

Sounds like you found your solution.

When you say "previews", do you mean when hovering over the thumbnail, the thumbnail itself, or hovering over a quotelink?
'Image on hover' should be #ihover, but I was under the impression that already shrinks to fit the browser.

There is also the aspect-ratio property that might help with what you're after. You can also use units like vw and vh which are based on the browser viewport width/height.

[kakhulu31]

Thanks for the info, gpt will find it useful I guess. I would be able to solve the issue by using it but unfortunately 4chanx is too large so gpt doesn't know how previews are implemented.

When you say "previews", do you mean when hovering over the thumbnail, the thumbnail itself, or hovering over a quotelink?

I'm talking about hovering over the thumbnail:

1712356827786839.mp4

[saxamaphone69]

#ihover {
  max-height: 20px !important;
  max-width: 20px !important;
}

Should do it?

[kakhulu31]

Yes it worked, thanks. I tried it myself but forgot about !important