Re-centering images after changing image component

Also fixing scaling issues in pages when image is thinner than page width.
This commit is contained in:
Алексей Ермолаев 2023-07-21 17:50:09 +03:00
parent 40350c5eab
commit 3d0a56e4c6
5 changed files with 10 additions and 4 deletions

View File

@ -91,6 +91,8 @@ const isThumbnailAvailable = computed(() => {
border: 0;
padding: 0;
cursor: pointer;
align-items: center;
justify-content: center;
> .icon-sub {
position: absolute;

View File

@ -53,8 +53,11 @@ const props = defineProps<{
}
> .thumbnail {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: absolute;
transition: all 0.5s ease;

View File

@ -30,8 +30,7 @@ const image = props.hpml.page.attachedFiles.find(
<style lang="scss" scoped>
.lzyxtsnt {
> img {
max-width: 100%;
}
display: flex;
justify-content: center;
}
</style>

View File

@ -149,7 +149,6 @@ import { computed, defineComponent, inject, watch } from "vue";
import MkButton from "@/components/MkButton.vue";
import * as os from "@/os";
import MkContainer from "@/components/MkContainer.vue";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
import MkPagination from "@/components/MkPagination.vue";
import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
import MkFollowButton from "@/components/MkFollowButton.vue";

View File

@ -98,6 +98,9 @@ onMounted(() => {
grid-gap: 6px;
> .img {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 128px;
border-radius: 6px;