Add largest dimension property to enhance image display
This commit is contained in:
parent
3d0a56e4c6
commit
8550a8fe2c
@ -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>
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user