element-hq / element-hq/element-web

Appropriate limit to image width/size

Open
#19,869 3 comments 0 reactions 0 assignees View on GitHub
A-Media O-Occasional S-Major T-Enhancement X-Needs-Design
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Your use case

#### What would you like to do?
Images can have many aspect ratios. Recently this setting was added to element (matrix-org/matrix-react-sdk#7017):
![image](https://user-images.githubusercontent.com/2803622/143077796-b689a95d-54e3-4b30-837a-3f057ffe5390.png)
I like that feature very much for most use cases, for example: often a smartphone screenshot is shared with a 9:16 or similar ratio at resolutions of 1080x1920. That is huge and fills out the whole screen.

On the other hand, sometimes I share screenshots like the following:
![image](https://user-images.githubusercontent.com/2803622/143078145-0828b84a-83c5-4d3e-a148-aadf7476c9c4.png)
![image](https://user-images.githubusercontent.com/2803622/143078176-c1465d0c-8fba-4a55-8c06-6e264e38037f.png)

I would like there to be a threshold of aspect ratio where element displays the thumbnail still at max width (as it used to), but as the aspect ratio gets closer to square, limit it (by height, e.g. as high as a collapsed code block?).

#### Why would you like to do it?
There is no use in limiting pictures like these to 1/3 of the timeline width (on 1080p, with right panel open), actually it limits the usefulness as I can barely recognize what the thumbnail is of.

#### How would you like to achieve it?
I think it is more complicated than simply limiting height. In the end an image should take up a maximum amount of display area. There is a threshold somewhere in there where an image starts to feel overwhelmingly large.

### Have you considered any alternatives?

_No response_

### Additional context

#19788

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the image-sizing behavior described in this issue and the referenced matrix-react-sdk#7017 and #19788 issues. Define the aspect-ratio and display-area thresholds, then verify that wide and near-square images render at the intended sizes across the described timeline layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.