Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-21 16:03:03 +01: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}`"
:src="page.url"
:class="imgClass(spread)"
class="img-fit-all"
/>
</div>
</div>
@ -241,7 +242,7 @@ export default Vue.extend({
case ScaleType.SCREEN:
return double ? 'img-double-fit-screen' : 'img-fit-screen'
default:
return ''
return 'img-fit-original'
}
},
eagerLoad (spreadIndex: number): boolean {
@ -349,28 +350,40 @@ export default Vue.extend({
position: absolute;
}
.img-fit-all {
object-fit: contain;
object-position: center;
}
.img-fit-width {
max-width: 100vw;
width: 100vw;
min-height: 100vh;
align-self: flex-start;
}
.img-double-fit-width {
max-width: 50vw;
width: 50vw;
min-height: 100vh;
align-self: flex-start;
}
.img-fit-original {
width: auto;
height: auto;
}
.img-fit-height {
min-height: 100vh;
height: 100vh;
}
.img-fit-screen {
max-width: 100vw;
max-height: 100vh;
width: 100vw;
height: 100vh;
}
.img-double-fit-screen {
max-width: 50vw;
max-height: 100vh;
object-fit: contain;
height: 100vh;
}
</style>