this repo has no description
Experiment reduce radius for uncropped images
+43
-12
+39
-12
src/components/media.jsx
+39
-12
src/components/media.jsx
···
338
338
onLoad={(e) => {
339
339
// e.target.closest('.media-image').style.backgroundImage = '';
340
340
e.target.dataset.loaded = true;
341
-
if (!hasDimensions) {
342
-
const $media = e.target.closest('.media');
343
-
if ($media) {
344
-
const { naturalWidth, naturalHeight } = e.target;
345
-
$media.dataset.orientation =
346
-
naturalWidth > naturalHeight ? 'landscape' : 'portrait';
347
-
$media.style.setProperty('--width', `${naturalWidth}px`);
348
-
$media.style.setProperty(
349
-
'--height',
350
-
`${naturalHeight}px`,
351
-
);
352
-
$media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
341
+
const $media = e.target.closest('.media');
342
+
if (!hasDimensions && $media) {
343
+
const { naturalWidth, naturalHeight } = e.target;
344
+
$media.dataset.orientation =
345
+
naturalWidth > naturalHeight ? 'landscape' : 'portrait';
346
+
$media.style.setProperty('--width', `${naturalWidth}px`);
347
+
$media.style.setProperty('--height', `${naturalHeight}px`);
348
+
$media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
349
+
}
350
+
351
+
// Check natural aspect ratio vs display aspect ratio
352
+
if ($media) {
353
+
const {
354
+
clientWidth,
355
+
clientHeight,
356
+
naturalWidth,
357
+
naturalHeight,
358
+
} = e.target;
359
+
if (
360
+
clientWidth &&
361
+
clientHeight &&
362
+
naturalWidth &&
363
+
naturalHeight
364
+
) {
365
+
const naturalAspectRatio = (
366
+
naturalWidth / naturalHeight
367
+
).toFixed(2);
368
+
const displayAspectRatio = (
369
+
clientWidth / clientHeight
370
+
).toFixed(2);
371
+
const similarThreshold = 0.05;
372
+
if (
373
+
naturalAspectRatio === displayAspectRatio ||
374
+
Math.abs(naturalAspectRatio - displayAspectRatio) <
375
+
similarThreshold
376
+
) {
377
+
$media.classList.add('has-natural-aspect-ratio');
378
+
}
379
+
// $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
353
380
}
354
381
}
355
382
}}
+4
src/components/status.css
+4
src/components/status.css
···
1070
1070
--aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
1071
1071
width: min(var(--aspectWidth), var(--width), 100%);
1072
1072
max-height: min(var(--height), 33vh);
1073
+
1074
+
&.has-natural-aspect-ratio {
1075
+
--media-radius: 4px;
1076
+
}
1073
1077
}
1074
1078
.status .media-container.media-eq1 .media[data-orientation='portrait'] {
1075
1079
/* width: auto;