tweak MkMediaImage.vue

packages/frontend/src/components/MkMediaImage.vue

@@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		}"
 	>
 		<MkImgWithBlurhash
+			v-if="prefer.s.enableHighQualityImagePlaceholders"
 			:hash="image.blurhash"
 			:src="(prefer.s.dataSaver.media && hide) ? null : url"
 			:forceBlurhash="hide"
@@ -27,6 +28,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:width="image.properties.width"
 			:height="image.properties.height"
 			:style="hide ? 'filter: brightness(0.7);' : null"
+			:class="$style.image"
+		/>
+		<div
+			v-else-if="prefer.s.dataSaver.media || hide"
+			:title="image.comment || image.name"
+			:style="hide ? 'background: #888;' : null"
+			:class="$style.image"
+		></div>
+		<img
+			v-else
+			:src="url"
+			:alt="image.comment || image.name"
+			:title="image.comment || image.name"
+			:class="$style.image"
 		/>
 	</component>
 	<template v-if="hide">
@@ -300,4 +315,12 @@ html[data-color-scheme=light] .visible {
 	font-size: 0.8em;
 	padding: 2px 5px;
 }
+
+.image {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	object-position: center;
+}
 </style>