Refactor thumbnail sizing.

This commit is contained in:
Dermot Duffy
2022-06-04 11:04:38 -07:00
parent c776758b5e
commit 42c8251c20
13 changed files with 104 additions and 61 deletions
+7 -7
View File
@@ -1,24 +1,24 @@
:host {
display: block;
height: 100%;
max-width: var(--frigate-card-thumbnail-size);
max-height: var(--frigate-card-thumbnail-size);
overflow: hidden;
// Restrict images to a maximum of thumbnail size.
aspect-ratio: 1 / 1;
}
img, ha-icon {
border-radius: var(--ha-card-border-radius, 4px);
max-width: var(--frigate-card-thumbnail-size-max);
max-height: var(--frigate-card-thumbnail-size-max);
width: 100%;
height: 100%;
// Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
// should be clipped to fill the thumbnail div whilst maintaining
// aspect-ratio.
object-fit: cover;
// Restrict images to a maximum of thumbnail size.
aspect-ratio: 1 / 1;
height: 100%;
transition: transform 0.2s linear;
}