Handle tiny images & fix layout

Honestly there's just too many possibilities
This commit is contained in:
Lim Chee Aun 2024-06-11 14:46:29 +08:00
parent 17a3939061
commit c0c7fdd6e1
2 changed files with 37 additions and 19 deletions

View file

@ -362,6 +362,13 @@ function Media({
naturalWidth &&
naturalHeight
) {
const minDimension = 88;
if (
naturalWidth < minDimension ||
naturalHeight < minDimension
) {
$media.dataset.hasSmallDimension = true;
} else {
const naturalAspectRatio = (
naturalWidth / naturalHeight
).toFixed(2);
@ -379,6 +386,7 @@ function Media({
// $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
}
}
}
}}
onError={(e) => {
const { src } = e.target;

View file

@ -1074,6 +1074,11 @@
&[data-has-natural-aspect-ratio] {
--media-radius: 4px;
}
&[data-has-small-dimension] img {
object-fit: contain;
image-rendering: pixelated;
}
}
.status .media-container.media-eq1 .media[data-orientation='portrait'] {
/* width: auto;
@ -1349,22 +1354,27 @@ body:has(#modal-container .carousel) .status .media img:hover {
background-color: var(--outline-color);
}
.status.large .media-large-container {
.status .media-large-container {
width: 100%;
max-width: 100%;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-direction: row;
/* align-items: center;
justify-content: center; */
column-gap: 8px;
flex-wrap: wrap;
text-align: center;
.media[data-has-small-dimension] {
width: auto !important;
}
figure {
justify-content: center;
flex-direction: column;
figcaption {
text-align: center;
flex-grow: 0 !important;
flex-basis: auto !important;
align-self: flex-start !important;
}
}
}