2.41: Pictures are not shown right in preview

ratanplan · 10-16-2015, 02:30 AM

I've updated to 2.41.
Now the preview of the editor does not honour the style of pictures.
See the example: style is height:100% and max-width: 100%
But the preview just shows a tiny picture (witch has not many px); before 2.41 the preview took the css and not just the px

kovidgoyal · 10-16-2015, 02:40 AM

That's because the preview was changed to render in XHTML mode, for other reasons. If you want full screen images, you should be using SVG, not an img with height:100%

ratanplan · 10-16-2015, 02:45 AM

Ok. I understand.
Unfortunately I don't want to use svg, because for me it has disadvantages.

So I think, I have to live with that.

senhal · 10-16-2015, 01:04 PM

Try height="100%" instead of style=...
Eventually add img{max-width:100%;} in the css

theducks · 10-16-2015, 01:09 PM

Quote:

Originally Posted by senhal

Try height="100%" instead of style=...
Eventually add img{max-width:100%;} in the css

IMHO max-whatever: 100% ;is Nonsense
Max-whatever: is a constraint. Don't make it bigger than X if you set the (normal)whatever to a percentage

senhal · 10-16-2015, 02:13 PM

Quote:

Originally Posted by theducks

IMHO max-whatever: 100% ;is Nonsense
Max-whatever: is a constraint. Don't make it bigger than X if you set the (normal)whatever to a percentage

Maybe I'm missing something... Which are the cons?

theducks · 10-16-2015, 02:33 PM

Quote:

Originally Posted by senhal

Maybe I'm missing something... Which are the cons?

In makes no Logical sense, therefor confuses users even if it did not crash the render engine

Max and Min are Limits and should be used that way.
(I would assume

that 100% of the whatever would be implied if it was missing )

senhal · 11-01-2015, 04:16 AM

Quote:

Originally Posted by ratanplan

Ok. I understand.
Unfortunately I don't want to use svg, because for me it has disadvantages.

So I think, I have to live with that.

Please forgive my previous reply: I was missing the "2.41" in the title and I was still using 2.40. Now I get it

You can consider to insert the picture in a div with the height/width you want: this "trick" seems to work with book-edit.

Code:

<div style="height:100%"><img height="100%" src="../Images/cover.jpg"/></div>

ratanplan · 11-01-2015, 03:08 PM

Thank you for your "trick". This workaround forces the preview panel to show the picture in the correct way.
(But finally it is what it is: a workaround.)

senhal · 11-02-2015, 08:47 AM

Quote:

Originally Posted by ratanplan

Thank you for your "trick". This workaround forces the preview panel to show the picture in the correct way.
(But finally it is what it is: a workaround.)

Yes, it's a workaround, but it works also on older versions of iBooks (with their well-known bug in pictures width).

10-16-2015, 02:30 AM	#1
ratanplan Member Posts: 21 Karma: 84 Join Date: Feb 2015 Device: Kindle Voyage, Kobo Glo	2.41: Pictures are not shown right in preview I've updated to 2.41. Now the preview of the editor does not honour the style of pictures. See the example: style is height:100% and max-width: 100% But the preview just shows a tiny picture (witch has not many px); before 2.41 the preview took the css and not just the px Attached Thumbnails

10-16-2015, 02:40 AM	#2
kovidgoyal creator of calibre Posts: 45,534 Karma: 28548962 Join Date: Oct 2006 Location: Mumbai, India Device: Various	That's because the preview was changed to render in XHTML mode, for other reasons. If you want full screen images, you should be using SVG, not an img with height:100% Last edited by kovidgoyal; 10-16-2015 at 02:46 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Images not shown	sdfg	Calibre	11	03-04-2015 10:42 PM
Glo hide the footnote / endnote text shown in note preview	fxp33	Kobo Reader	3	05-04-2013 08:11 PM
preview vs print preview	isalherbo	Sigil	7	04-23-2013 03:52 PM
Can you idetify the model shown here	jbcohen	Sony Reader	13	05-25-2012 07:54 AM
DR800 Anyway to get a clock shown at the bottom?	antistar	iRex	1	04-19-2010 03:13 AM

10-16-2015, 02:45 AM	#3
ratanplan Member Posts: 21 Karma: 84 Join Date: Feb 2015 Device: Kindle Voyage, Kobo Glo	Ok. I understand. Unfortunately I don't want to use svg, because for me it has disadvantages. So I think, I have to live with that.

10-16-2015, 01:04 PM	#4
senhal Connoisseur Posts: 82 Karma: 25684 Join Date: Sep 2014 Device: Kindle NT	Try height="100%" instead of style=... Eventually add img{max-width:100%;} in the css

11-01-2015, 03:08 PM	#9
ratanplan Member Posts: 21 Karma: 84 Join Date: Feb 2015 Device: Kindle Voyage, Kobo Glo	Thank you for your "trick". This workaround forces the preview panel to show the picture in the correct way. (But finally it is what it is: a workaround.)