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:
parent
40350c5eab
commit
3d0a56e4c6
@ -91,6 +91,8 @@ const isThumbnailAvailable = computed(() => {
|
|||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
> .icon-sub {
|
> .icon-sub {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -53,8 +53,11 @@ const props = defineProps<{
|
|||||||
}
|
}
|
||||||
|
|
||||||
> .thumbnail {
|
> .thumbnail {
|
||||||
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
|
|
||||||
|
@ -30,8 +30,7 @@ const image = props.hpml.page.attachedFiles.find(
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.lzyxtsnt {
|
.lzyxtsnt {
|
||||||
> img {
|
display: flex;
|
||||||
max-width: 100%;
|
justify-content: center;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -149,7 +149,6 @@ import { computed, defineComponent, inject, watch } from "vue";
|
|||||||
import MkButton from "@/components/MkButton.vue";
|
import MkButton from "@/components/MkButton.vue";
|
||||||
import * as os from "@/os";
|
import * as os from "@/os";
|
||||||
import MkContainer from "@/components/MkContainer.vue";
|
import MkContainer from "@/components/MkContainer.vue";
|
||||||
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
|
||||||
import MkPagination from "@/components/MkPagination.vue";
|
import MkPagination from "@/components/MkPagination.vue";
|
||||||
import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
|
import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
|
||||||
import MkFollowButton from "@/components/MkFollowButton.vue";
|
import MkFollowButton from "@/components/MkFollowButton.vue";
|
||||||
|
@ -98,6 +98,9 @@ onMounted(() => {
|
|||||||
grid-gap: 6px;
|
grid-gap: 6px;
|
||||||
|
|
||||||
> .img {
|
> .img {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 128px;
|
height: 128px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
Loading…
Reference in New Issue
Block a user