fix(library): show full photo in each grid thumb (square + contain)
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
Library thumbs were locked to 4:3 with object-fit: cover, so portrait photos got their top and bottom crop-fitted off. Switching to 1:1 cells with object-fit: contain — full photo always visible, grid still uniform, portrait and landscape both get symmetric letterbox bars. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -584,9 +584,12 @@ async function doDelete() {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
// Square cells with object-fit: contain so both portrait and landscape
|
||||
// photos render in full (no aggressive crop); grid stays uniform; aspect
|
||||
// mismatches show as symmetric letterbox bars top/bottom or left/right.
|
||||
&__thumb {
|
||||
position: relative;
|
||||
aspect-ratio: 4/3;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface-2);
|
||||
@@ -595,7 +598,7 @@ async function doDelete() {
|
||||
&__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -14,7 +14,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="pictureFrame" />
|
||||
<script type="module" crossorigin src="/build/assets/index-RZqoO867.js"></script>
|
||||
<script type="module" crossorigin src="/build/assets/index-Bx9Y0zPK.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
|
||||
<link rel="stylesheet" crossorigin href="/build/assets/index-BlLBHR1q.css">
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user