Add largest dimension property to enhance image display

packages/client/src/components/MkImgWithBlurhash.vue

@@ -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>

packages/client/src/components/MkMedia.vue

@@ -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",