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;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> .icon-sub {
|
||||
position: absolute;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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";
|
||||
|
@ -98,6 +98,9 @@ onMounted(() => {
|
||||
grid-gap: 6px;
|
||||
|
||||
> .img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 128px;
|
||||
border-radius: 6px;
|
||||
|
Loading…
Reference in New Issue
Block a user