Open dvschultz opened 10 years ago
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
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 notifications@github.com 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.
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.
Nice
N. Erhan Üzümcü
27 Haz 2014 tarihinde 00:42 saatinde, dvschultz notifications@github.com ş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.
here’s an image of what it does:
@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.
Must be padding:0;
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.
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.
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.
figure{ margin: 0 0 0 -32px; } OK. Do you try this solution? -32px or more or less... Or % value...
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.
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
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 evenwidth: 100%
on the<img>
doesn’t work to fix it.