Skip to content

Unstretch covers/posters [CSS crops each rectangle to its central square "thumbnail"] #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Dec 28, 2023
Merged

Unstretch covers/posters [CSS crops each rectangle to its central square "thumbnail"] #80

merged 1 commit into from
Dec 28, 2023

Conversation

deldesir
Copy link
Collaborator

The object-fit: cover property ensures that the video thumbnails maintain their aspect ratio and cover the entire container without stretching.

The object-position: center center property centers the image within the container.

@deldesir
Update style.css
c26fc99 
The object-fit: cover property ensures that the video thumbnails maintain their aspect ratio and cover the entire container without stretching. 

The object-position: center center property centers the image within the container.
@deldesir deldesir changed the title Unstretched covers Unstretch covers Dec 28, 2023
@holta holta changed the title Unstretch covers Unstretch covers/posters [CSS crops each rectangle to its central square "thumbnail"] Dec 28, 2023
@holta
Copy link
Member

holta commented Dec 28, 2023 •
edited
Loading

  1. This PR looks almost identical to https://stackoverflow.com/questions/15167545/how-to-crop-a-rectangular-image-into-a-square-with-css/38926886 interestingly.

    Above page might be useful in future, if CSS ever needs to be tweaked for any reason?

  2. Overweight covers/posters might in future each be properly thumbnailed to e.g. 200x200 pixel cover-square.JPG — if extremely low-income users have...

    • Client-side (browser / device) slowness problems — e.g. rendering too many covers/posters/thumbnails on a page ?

    • e.g. Wi-Fi congestion performance problems?

  3. Smartcrop software libraries could also be debugged in future if necessary, building on:

Related:

@holta holta merged commit 1ca10c9 into iiab:master Dec 28, 2023
@holta holta added the enhancement New feature or request label Dec 28, 2023
@deldesir deldesir deleted the deldesir-css-style branch July 1, 2024 21:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

enhancement New feature or request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@deldesir @holta