voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Finally improve photo thumbnail css to reduce use of 150px constant.

Browse source 
I've attempted this so many times and always failed. object-fit:contain
and minmax(0, fr) was the solution.
This commit is contained in:
voussoir 2021-10-31 16:15:57 -07:00
parent 3e72029908
commit bfe11cccd5
No known key found for this signature in database
GPG key ID: 5F7554F8C26DACCB
1 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontends/etiquette_flask/static/css/cards.css
View file

@ -160,8 +160,8 @@
display: inline-grid; display: inline-grid;
vertical-align: top; vertical-align: top;
grid-template: grid-template:
"thumbnail thumbnail" auto "thumbnail thumbnail" minmax(0, 1fr)
"filename filename" 1fr "filename filename" 50px
"tags metadata" auto "tags metadata" auto
/10px auto; /10px auto;
min-width: 150px; min-width: 150px;
@ -194,12 +194,13 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 150px; height: 100%;
} }
.photo_card_grid .photo_card_thumbnail img .photo_card_grid .photo_card_thumbnail img
{ {
max-width: 100%; width: 100%;
max-height: 150px; height: 100%;
object-fit: contain;
} }
.photo_card_filename .photo_card_filename