Images cut off, easy solution?

[fogice]

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:

<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%;
}

This graphic is 1123 high and 794 wide, but the sizes vary. I also notice that the graphic is squished vertically on the Kobo, but not on the iPhone.

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.

[theducks]

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)

[fogice]

Originally Posted by theducks

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)

I created a copy of calibre2 called calibre2g and removed the indent. This brings the right edge back onto the screen, which is a great first step. (The original document had spaces between paragraphs and no indents; the Convert Books tool changed that to indents without spaces for me, and I guess it affected these pages as well.)

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?

[theducks]

change the width to auto
Set the height to 95%