Add largest dimension property to enhance image display

This commit is contained in:
Алексей Ермолаев 2023-07-21 19:05:45 +03:00
parent 3d0a56e4c6
commit 8550a8fe2c
2 changed files with 20 additions and 1 deletions

View File

@ -12,7 +12,11 @@
:title="title"
:type="type"
:alt="alt"
:class="{ cover }"
:class="{
cover,
wide: largestDimension === 'width',
tall: largestDimension === 'height'
}"
:style="{ 'object-fit': cover ? 'cover' : null }"
loading="lazy"
@load="onLoad"
@ -32,6 +36,7 @@ const props = withDefaults(
title?: string | null;
size?: number;
cover?: boolean;
largestDimension?: 'width'|'height'
}>(),
{
src: null,
@ -82,5 +87,13 @@ canvas {
img {
object-fit: contain;
&.wide {
width: 100%;
}
&.tall {
height: 100%;
}
}
</style>

View File

@ -26,6 +26,7 @@
:alt="media.comment"
:type="media.type"
:cover="false"
:largest-dimension="largestDimension"
/>
<div v-if="media.type === 'image/gif'" class="gif">GIF</div>
</a>
@ -120,6 +121,11 @@ const mediaType = computed(() => {
: props.media.type;
});
let largestDimension: 'width'|'height';
if (props.media.type.startsWith('image') && props.media.properties?.width && props.media.properties?.height) {
largestDimension = props.media.properties.width > props.media.properties.height ? 'width' : 'height'
}
function captionPopup() {
os.alert({
type: "info",