Paperwhite doesn’t respect image width CSS

[dvschultz]

trafficstars

if an <img> is wrapped in a <figure> tag and the figure tag has left padding on it, the image inside extends outside of its wrapper. Seems like even width: 100% on the <img> doesn’t work to fix it.

[teytag]

Semantic figure element (from the W3Schools)

<figure>
     <img src="http://www.google.com/images/srpr/logo3w.png" width="auto" height="auto" alt="logo3w.png" />
</figure>

My solution at below lines... Figure element control with CSS and img-width: 100% img-height:auto So image extends with figure element CSS control

<style type="text/css" media="screen">
figure {
margin:0; /* optional: hide semantic behavior */
width: 128px; /* optional: hide semantic behavior */
border: 1px solid red;
overflow:hidden; 
}
</style>
<figure>
     <img src="http://www.google.com/images/srpr/logo3w.png" width="100%" height="auto" alt="logo3w.png" />
</figure>

Another web site about this topic: http://sketchytech.blogspot.com.tr/2014/01/giving-div-and-figure-tag-about-images.html

[jeankaplansky]

Which version of the paperwhite (the 2 versions can do different things). Which specific version of the firmware. There was a recent update.

On Tue, Jun 24, 2014 at 3:50 AM, teytag [email protected] wrote:

Semantic figure element

Figure element control with CSS and img-width: 100% img-height:auto So image extends with figure element CSS control

— Reply to this email directly or view it on GitHub https://github.com/dvschultz/99problems/issues/25#issuecomment-46941447.

[dvschultz]

latest firmware of the 2nd gen paperwhite.

my css:

figure {
   width: 80%;
   padding: 0 10%; /*just to center the figure*/
}
figure img {
    width: 100%;
    max-width: 100%
}

this causes the image to stick outside the figure area. works fine in every other kindle device.

[teytag]

Nice

N. Erhan Üzümcü

27 Haz 2014 tarihinde 00:42 saatinde, dvschultz [email protected] şunları yazdı:

latest firmware of the 2nd gen paperwhite.

my css:

figure { width: 80%; padding: 0 10%; } figure img { width: 100%; max-width: 100% } this causes the image to stick outside the figure area. works fine in every other kindle device.

— Reply to this email directly or view it on GitHub.

[dvschultz]

here’s an image of what it does:

[teytag]

[dvschultz]

@teytag the issue isn’t centering. its that the paperwhite doesn’t size the image inside its container correctly. assigning width: 100% to the should make the width 100% of its containing element. Instead, its making it 100% the width of the viewport and pushing the right side outside the figure container.

[teytag]

Must be padding:0;

[dvschultz]

not 100% sure why this works but it does:

doesn’t work:

figure {
        width: 80%;
        padding: 0 10%;
    }

    figure img {
        width: 100%;
        max-width: 100%;
    }

does work:

.figure {
        width: 100%;
        margin: 0;
    }

    .figure img {
        display: block;
        width: 80%;
        padding: 0 10%;
        box-sizing: border-box;
    }

and yes, you do actually need that box-sizing style in there. totally confounded by this one.

[teytag]

Hi,

As you can see in the example blow, you do not need to give a box-sizing value fot the IMG element. This is because the IMG element is not a carrier tool.

[dvschultz]

like I said, this is specific to the Kindle Paperwhite. I know how it should work in modern web browsers, but this is a bug for the Paperwhite.

[teytag]

figure{ margin: 0 0 0 -32px; } OK. Do you try this solution? -32px or more or less... Or % value...

[jperterm]

This issue seems only to be happen, if your image is a png (24) graphics file. Did you already try to use a jpeg?

My overall devices solution is to have two div wrappers, where the inner one is styled as an inline-block, which defines the relative size of the image. The outer wrapper has an text-align: center to center the inline-block. So it is similar, but not the same.

I also made the experience, that sometimes left aligned images (png’s) are sized correctly, whereas centered or right aligned are not.

I am not quite sure about this behaviour and still confused, because the possible reasons seem nebulous to me. By the way, I tested in Kindle Previewer 2.94 with eInk Voyager.

[ozone89]

having this issue as well on a PW3 with 5.12.4, CSS as follow:

.image {
  display: block;
  page-break-inside: avoid;
  border: thin black solid;
  border-radius: 10px;
  padding: 10px;
  text-indent: 0;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  width: 80%;
  margin: 1em 10%;
}
​
.image img {
  width: 100%;
}

a temporary workaround is to switch page orientation, all images are grayscale jpeg