[RbnJrg]

Originally Posted by SBT

Thanks for the suggestion, Rubén, I hadn't thought about testing that one. Sadly, that doesn't work either. The book in question is Wisting, Oscar: 16 år med Roald Amundsen, by the way.
The 76% width limit does make it natural to think of the e-ink aspect ratio, but what kind of warped logic that dictates that 77%-100% == 100% I cannot begin to fathom.

I have downloaded that book and I was studying your code. You are using the following:

  <div class="ic">
    <img alt="-*-" src="../Images/image00089.jpeg" />

    <div class="caption"></div>
  </div>

We can found the definitions of the class "ic" in your style003.css and style004.css stylesheets. There we can found:

* For portrait images:

div.ic {
    page-break-inside: avoid;
    text-align: center;
    margin: 1em 0;
}

div.ic img {
    width: 80%;
    margin-left: 10%;
}

Now do the following experiment: add a border of 1px to class "ic" and the img tag, of that way:

div.ic {
    page-break-inside: avoid;
    text-align: center;
    margin: 1em 0;
    border: 1px solid red;
}

div.ic img {
    width: 80%;
    margin-left: 10%;
    border: 1px solid blue;
}

Now you can see that images ARE NOT CENTERED! The "margin-left: 10%" style of div.ic img is not working as is expected (your images have a width of 80% and you defined a left margin of 10% and -by default- a right margin of 10%; so you want the images centered). But as we are working for kf8, I think is better to use "margin: 0 auto" instead of "margin-left: 10%". Of that way, your style could be:

div.ic img {
    width: 80%;
    margin: 0 auto;
}

By the way, AFAIK, KF8 doesn't accept a @media querie like:

@media (device-height:1024px),(device-height:800px),(device-height:1440px)

I think if we change "margin-left: 10%" by "margin: 0 auto;" the "width issue" could be solved (Right now in the computer where I'm writting these lines I don't have installed Kindle Previewer so I can't tell you if the code could work).

Regards

EDIT: Also -in this case- you can supress left/right margin for images. Just use:

div.ic img {
    width: 80%;
    margin: 0;
}