12-29-2023, 02:49 PM | #1 |
Groupie
Posts: 178
Karma: 12092
Join Date: May 2014
Device: Kobo Libra 2
|
Images cut off, easy solution?
I am reading a scraped version of a web serial. There are occasional chapters where there are graphics instead of text. In those, I am having an issue that the right edges of the graphics aren't being displayed. It happens on both my Kobo Libra 2 () and on the Books app on an iPhone ( ), although it displays fine in the Calibre editor. The original source is this webpage.
In the editor, this graphic is displayed as: Code:
<p class="calibre2"><img src="images/2020/07/location-notes-spirit-world-a-2.png" height="826" width="584" alt="" class="aligncenter8"/></p> .calibre2 { border-bottom: 0; border-top: 0; display: block; padding-bottom: 0; padding-top: 0; text-indent: 1.5em; margin: 0; } .aligncenter8 { height: auto; object-fit: contain; text-align: center; width: 100%; } Why are the graphics being cut off like this? Is there an easy regex or something that can make it all better, say to display at maximum size while keeping the ratio? Doing the fixes by hand would be painful, there are hundreds of these images. Last edited by fogice; 12-29-2023 at 03:14 PM. |
12-29-2023, 03:58 PM | #2 |
Well trained by Cats
Posts: 30,393
Karma: 58053698
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
CSS
Cascade means things nest (and some can't be disabled) Body has margins You indented calibre2 The device needs a few PX leeway for the bezel. trying for a Zero overall margin is fraught. (FWIW I use 4px as my body default) |
Advert | |
|
12-29-2023, 04:21 PM | #3 | |
Groupie
Posts: 178
Karma: 12092
Join Date: May 2014
Device: Kobo Libra 2
|
Quote:
I don't need the graphic to be completely bezel-to-bezel, just 'reasonably maximized' and in proportion. If I remove the height="nn" and width="nn" elements for each graphic, would the CSS for aligncenter8 keep things under control? And what's the alt="" tag for, is that hover-text? |
|
12-29-2023, 07:20 PM | #4 |
Well trained by Cats
Posts: 30,393
Karma: 58053698
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
change the width to auto
Set the height to 95% |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
CSS solution for words cut-off in kepub full screen reading | scoky | Kobo Reader | 35 | 04-29-2015 02:07 AM |
images are cut off during mobi to PDF conversion | readman | Conversion | 2 | 06-30-2012 09:05 AM |
Possible solution for full screen images | erez213 | Kindle Developer's Corner | 242 | 06-20-2012 11:15 AM |
PDF images upside down - a solution | Fingerstoo | Conversion | 4 | 12-21-2011 11:57 AM |
I'm hoping there's an easy solution | simplynoted | Workshop | 3 | 07-25-2011 09:16 PM |