Hi,
I am currently facing an interesting issue with anti-aliasing and I understand the problem and might have a good idea of the possible solution, but I don't know how to implement it. I would like to have your thoughts and suggestions if possible. 🙏
TLDR: I need to give integer dimensions to dynamic images displayed in a column.
Situation setting
I am working on a webtoon (comic) platform where creators can selfpublish their work and readers can read their webtoon. Creators upload multiple images that compose their webtoon, and these images are then displayed in a column where they should be one below the other, with no space between the images, in order to create an optimal reading experience. But this is where my problem arises:
As you can see, a small black line appears between each images. It didn't take me long to understand that we are seeing the background color of the app between each image. But the question was: why?
Understanding the issue
After some testing, I understood that it was because of the dynamic size of the images. Since I want the image to fit 100% of the screen width and the height must keep its proportions, a 800 x 1000px image becomes 390 x 487.5 on mobile. The "0.5" pixel breaks everything by creating a transparent gap.
I tried every possible layout options, and the only solution I found was to give a fixed height to the image / container. But I can't do that since all images have different ratio. Creators can publish 800x1000px, 800x1280px, etc. Their's no standard in image size. So what I understand is that I absolutely need an integer height.
That's where I think I have a solution, but I don't know how to do it.
Possible solution
When the page load, we know the screen width, so let's say it's 390px.
In my database (Firebase/Firestore), I have the images saved by creators in different folders. The images URL are saved in an "Episode" document. I don't have the dimensions of the images explicitly, but I imagine it's possible to find them. When I download the image on my computer, I can see it's 800 x 1000, for example, but Firestore won't give me the dimensions automatically.
If I could get the original dimensions of the image, and we know the screen width, we could find the "Ratio" of each image. In this example, I could tell that the 800px image becomes 390px (100% screen width), so it's height becomes 487.5px.
After getting the height of 487.5px, I would need to floor() to the nearest integer (rounded down). This could distort the image or cut it off by 0.9px, but it shouldn't have as visible an impact as the black line.
This would give us the dimension we need to give a fixed height dynamically to each container, and this first image would be 390 x 487px, with no anti-aliasing issue.
Now, that's my idea, but I don't even know how to "build" all of this logic, and I really don't know if it's the only solution or if someone may have an easy fix I just didn't think of. 😅
Let me know what you think and thank you in advance for your help! 🙏