diff options
| -rw-r--r-- | packages/frontend/src/components/MkMediaImage.vue | 23 |
1 files changed, 23 insertions, 0 deletions
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue index 68ba7dfbe9..1e5eb06a31 100644 --- a/packages/frontend/src/components/MkMediaImage.vue +++ b/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> |