Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2026-05-08 21:00:16 +02:00
Code Issues Projects Releases Wiki Activity

fix(webreader): images smaller than viewport would not fill width

Browse source 
closes #311
This commit is contained in:
Gauthier Roebroeck 2020-09-12 17:17:32 +08:00
parent 71f40b17a8
commit 81d9a00185
1 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
komga-webui/src/components/readers/PagedReader.vue
View file

@ -31,6 +31,7 @@
:key="`spread${i}-${j}`" :key="`spread${i}-${j}`"
:src="page.url" :src="page.url"
:class="imgClass(spread)" :class="imgClass(spread)"
class="img-fit-all"
/> />
</div> </div>
</div> </div>
@ -241,7 +242,7 @@ export default Vue.extend({
case ScaleType.SCREEN: case ScaleType.SCREEN:
return double ? 'img-double-fit-screen' : 'img-fit-screen' return double ? 'img-double-fit-screen' : 'img-fit-screen'
default: default:
return '' return 'img-fit-original'
} }
}, },
eagerLoad (spreadIndex: number): boolean { eagerLoad (spreadIndex: number): boolean {
@ -349,28 +350,40 @@ export default Vue.extend({
position: absolute; position: absolute;
} }
.img-fit-all {
object-fit: contain;
object-position: center;
}
.img-fit-width { .img-fit-width {
max-width: 100vw; width: 100vw;
min-height: 100vh;
align-self: flex-start; align-self: flex-start;
} }
.img-double-fit-width { .img-double-fit-width {
max-width: 50vw; width: 50vw;
min-height: 100vh;
align-self: flex-start; align-self: flex-start;
} }
.img-fit-original {
width: auto;
height: auto;
}
.img-fit-height { .img-fit-height {
min-height: 100vh;
height: 100vh; height: 100vh;
} }
.img-fit-screen { .img-fit-screen {
max-width: 100vw; width: 100vw;
max-height: 100vh; height: 100vh;
} }
.img-double-fit-screen { .img-double-fit-screen {
max-width: 50vw; max-width: 50vw;
max-height: 100vh; height: 100vh;
object-fit: contain;
} }
</style> </style>