When the height and width of the image are% instead of vh, the image cannot be centered vertically

[Qing-Novel]

Describe the bug

When the height and width of the image are% instead of vh, the image cannot be centered vertically

.duokan-image-single {
	display:flex;
	height:100%;
	justify-content:center;
	align-items:center;
}
.duokan-image-single .w{
	width:100%;

}
.duokan-image-single .h {
	height:100%;
}

How to reproduce?

AiVideo_20250506144549.mp4

Readium version

3.1.0

Android API version

29

Additional context

Due to the large size of the file, some images were deleted to reduce the volume
不正经的魔术讲师与绘画回想 1 (1).zip

[JayPanoz]

Thanks for your patience, I have had very little bandwidth for ReadiumCSS in the last couple of weeks due to the massive work to be done in Thorium Web so I’m catching up on issues just now.

I will take a deeper look into the file this week but it sounds like the typical web issue making something 100% of the browser’s height – and the fix is having html and body have height: 100% as well. That is consistent with 100vh working as expected.

ReadiumCSS does not apply height: 100% to body because we can’t (otherwise this is a problem for scroll layout). Related issue: #158

[Qing-Novel]

Thanks for your patience, I have had very little bandwidth for ReadiumCSS in the last couple of weeks due to the massive work to be done in Thorium Web so I’m catching up on issues just now.

I will take a deeper look into the file this week but it sounds like the typical web issue making something 100% of the browser’s height – and the fix is having html and body have height: 100% as well. That is consistent with 100vh working as expected.

ReadiumCSS does not apply height: 100% to body because we can’t (otherwise this is a problem for scroll layout). Related issue: #158

Okay, if possible, I hope the issue can be fixed.