[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.