View Single Post
Old 07-02-2023, 01:59 AM   #36
Interrobang
Oracle Pig Keeper
Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!Interrobang , Klaatu Barada Niktu!
 
Posts: 26
Karma: 5024
Join Date: Jun 2023
Device: Kindle Fire HD, Samsung Tab
I wanted to update everyone on the results of my testing to date.

Previously, when I used the built-in code for a cover image, code that creates an SVG wrapper, my image would not be full screen. The image would be flush along the top, a border along the bottom edge, and a larger border along both the left and right edges. Side note: I'm sure the left and right borders are a result of keeping the aspect ratio.

After extensive Googling/reading/experimenting, I've discovered the following:

If I use a standard <img> tag and not the <svg> wrapper, my image is larger. There is no margin along the bottom edge! Also, the size of the image doesn't change if the encapsulating <div> does or doesn't contain "height: 100vh;".

These results seem opposite of what I had read, both here and on other sites, about using the SVG wrapper. With the <img> tag, if I just set "height: 100%" and no declaration for width, my image's aspect ratio is preserved, which was also supposed to be one of the benefits of using the wrapper.

As it stands now, I'm just going to abandon the idea of using the SVG wrapper since I get better results with a plain image tag.

If anyone has any questions about what I've tried or would like me to provide a sample epub or screenshots, just ask. Meanwhile, I'll keep experimenting since the only thing I haven't played with yet is "@media" statements, and I want to be thorough in my research.
Interrobang is offline   Reply With Quote