this repo has no description
Handle tiny images & fix layout
Honestly there's just too many possibilities
+37
-19
+20
-12
src/components/media.jsx
+20
-12
src/components/media.jsx
···
362
362
naturalWidth &&
363
363
naturalHeight
364
364
) {
365
-
const naturalAspectRatio = (
366
-
naturalWidth / naturalHeight
367
-
).toFixed(2);
368
-
const displayAspectRatio = (
369
-
clientWidth / clientHeight
370
-
).toFixed(2);
371
-
const similarThreshold = 0.05;
365
+
const minDimension = 88;
372
366
if (
373
-
naturalAspectRatio === displayAspectRatio ||
374
-
Math.abs(naturalAspectRatio - displayAspectRatio) <
375
-
similarThreshold
367
+
naturalWidth < minDimension ||
368
+
naturalHeight < minDimension
376
369
) {
377
-
$media.dataset.hasNaturalAspectRatio = true;
370
+
$media.dataset.hasSmallDimension = true;
371
+
} else {
372
+
const naturalAspectRatio = (
373
+
naturalWidth / naturalHeight
374
+
).toFixed(2);
375
+
const displayAspectRatio = (
376
+
clientWidth / clientHeight
377
+
).toFixed(2);
378
+
const similarThreshold = 0.05;
379
+
if (
380
+
naturalAspectRatio === displayAspectRatio ||
381
+
Math.abs(naturalAspectRatio - displayAspectRatio) <
382
+
similarThreshold
383
+
) {
384
+
$media.dataset.hasNaturalAspectRatio = true;
385
+
}
386
+
// $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
378
387
}
379
-
// $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
380
388
}
381
389
}
382
390
}}
+17
-7
src/components/status.css
+17
-7
src/components/status.css
···
1074
1074
&[data-has-natural-aspect-ratio] {
1075
1075
--media-radius: 4px;
1076
1076
}
1077
+
1078
+
&[data-has-small-dimension] img {
1079
+
object-fit: contain;
1080
+
image-rendering: pixelated;
1081
+
}
1077
1082
}
1078
1083
.status .media-container.media-eq1 .media[data-orientation='portrait'] {
1079
1084
/* width: auto;
···
1349
1354
background-color: var(--outline-color);
1350
1355
}
1351
1356
1352
-
.status.large .media-large-container {
1357
+
.status .media-large-container {
1353
1358
width: 100%;
1354
1359
max-width: 100%;
1355
1360
display: inline-flex;
1356
-
flex-direction: column;
1357
-
align-items: center;
1358
-
justify-content: center;
1361
+
flex-direction: row;
1362
+
/* align-items: center;
1363
+
justify-content: center; */
1359
1364
column-gap: 8px;
1360
1365
flex-wrap: wrap;
1361
-
text-align: center;
1366
+
1367
+
.media[data-has-small-dimension] {
1368
+
width: auto !important;
1369
+
}
1362
1370
1363
1371
figure {
1364
-
justify-content: center;
1372
+
flex-direction: column;
1365
1373
1366
1374
figcaption {
1367
-
text-align: center;
1375
+
flex-grow: 0 !important;
1376
+
flex-basis: auto !important;
1377
+
align-self: flex-start !important;
1368
1378
}
1369
1379
}
1370
1380
}