XHTML img shrinked in tables only on ereader

il_mix · 09-25-2020, 01:30 AM

I have this basic XHTML file, with a table that displays images in the first column (images size is roughly 64x64 pix) and some text in the second column.

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <link href="../Styles/style.css" rel="stylesheet"/>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td><img src="../Images/A.png"/></td>
        <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sapien tortor, malesuada convallis mi quis, mattis porta eros. Integer sed massa et felis aliquam interdum eget sed massa. Vestibulum luctus, lacus in posuere consectetur, neque orci maximus lectus, tristique aliquam tortor nulla id lacus. Sed tempor auctor felis at vulputate.</p></td>
      </tr>
      <tr>
        <td><img src="../Images/D.png"/></td>
        <td><p>Donec pretium dapibus felis at vestibulum. Morbi posuere mauris ac facilisis sollicitudin. Praesent iaculis mauris molestie ante cursus, sit amet ornare velit viverra. Cras dictum sollicitudin erat, mollis tempus orci hendrerit sit amet.</p></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Opening the file in a browser, images in the first column are displayed full size. If I shrink the window, or force tablet/smartphone view in the browser, images are still displayed full size.

I added the file to an epub. Opening it with an ebook reader (Calibre default one) I see everything like in the browser (i.e. full size images).

I've uploaded the epub on my erader device (an old Kobo Touch). Here images are shrinked to a very small size.

Why is this happening?

Could it be an ereader problem? Likely. Any HTML/css trick to force full size?

I've tried to add this to the css file

Code:

table img {
  height: 100%! important;
}

Still no luck, the images are shrinked.

Quoth · 09-26-2020, 09:48 AM

Use width?

Turtle91 · 09-27-2020, 08:13 AM

Quote:

Originally Posted by Quoth

Use width?

Yes...using height isn't particularly reliable. I'd use width.

RbnJrg · 09-27-2020, 09:30 AM

Give to the table a "width", for example by adding in your .css file something like:

Code:

table.mytable {
    width: 100%; /*(or whatever the width you wish)*/
}

After that, give to the first column (cell) also a "width":

Code:

td.first {
     width: 33%; /*(or whatever the width you wish)*/
}

Finally, give to the image a width of 100%:

Code:

td.first img {
      width: 100%;
}

All that should fix your issue with your image. Of course, you must add the class "first" in your first cell of your table.mytable:

Code:

  <table class="mytable">
    <tbody>
      <tr>
        <td><img src="../Images/A.png"/></td>
        <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sapien tortor, malesuada convallis mi quis, mattis porta eros. Integer sed massa et felis aliquam interdum eget sed massa. Vestibulum luctus, lacus in posuere consectetur, neque orci maximus lectus, tristique aliquam tortor nulla id lacus. Sed tempor auctor felis at vulputate.</p></td>
      </tr>
      <tr>
        <td class="first"><img src="../Images/D.png"/></td>
        <td><p>Donec pretium dapibus felis at vestibulum. Morbi posuere mauris ac facilisis sollicitudin. Praesent iaculis mauris molestie ante cursus, sit amet ornare velit viverra. Cras dictum sollicitudin erat, mollis tempus orci hendrerit sit amet.</p></td>
      </tr>
    </tbody>
  </table>

il_mix · 09-28-2020, 10:37 AM

Ok, maybe I should have clarified beforehand why I used "height" instead of "width"...
When I set

Code:

width: 100%;

(with or without !important)
I get small images even in browser.
Setting

Code:

height: 100%;

I see original sized images in browser. That's why I opted for height in the EPUB, too.

Anyway, I've tested these options, with various results (none is ok);

Code:

width: 100%;

Images are shrinked. Same adding !important

Code:

height: 100%;

Images have original height, but are shrinked in width. Same adding !important

Code:

height: 100%;
width: 100%;

Images have original height, but are shrinked in width. Same adding !important

Regarding @RbnJrg hint, I prefer a more generic approach. I can have tables, with the same format as mytable, but have just text in the first column. So, I don't want to set a specific width for the first column. I want it to stretch given the image width (if any). This way I can avoid class-ification of the tds that contain images.

NOTE: in my former example I stated that the images are shrinked (in both width and height) when setting "height" attribute in CSS. I've noticed a typo in my CSS

Code:

height: 100%! important;

instead of

Code:

height: 100% !important;

That's probably why I had a different result with respect to this message recap; the CSS was probably ignored due to the error.

jhowell · 09-28-2020, 12:44 PM

What you are doing seems like a wrong approach. Specifying an image width or height in percent says to make it a percentage of the enclosing block, the table cell in this case. The image will end up being sized based on the other content in the table, not based on the image itself.

You should instead do something like set the table cells to each be a certain percentage of the screen width and then have the image take up 100% of the enclosing cell width.

RbnJrg · 09-28-2020, 03:39 PM

Quote:

Originally Posted by jhowell

You should instead do something like set the table cells to each be a certain percentage of the screen width and then have the image take up 100% of the enclosing cell width.

That's correct and was the central point of my aproximation, but it seems that the OP doesn't understand how images are displayed.

RbnJrg · 09-28-2020, 03:49 PM

Quote:

Originally Posted by il_mix

Regarding @RbnJrg hint, I prefer a more generic approach. I can have tables, with the same format as mytable, but have just text in the first column. So, I don't want to set a specific width for the first column. I want it to stretch given the image width (if any). This way I can avoid class-ification of the tds that contain images.

More generic approach?

You won't be able to get the proper with of an image if previously you don't set the width of the image container. Once you have done that (to set the width of the container), then by setting the image widh to 100% the image will be displayed with the width of your wish. You could try to enclose your image between <p> tags (and setting the width of them), neccesary to resolve a bug with some Kindles but your issue is with Kobo so I don't think that thing works. And don't use the properties "width: 100%" and "height: 100%" at the same time, otherwise your images will end distorted. By using height: 100% your image will displayed NOT WITH THE 100% of the image height, but the 100% of the container height. And what is the height of your cells? If you didn't set anything then must be 1em.

And how many tables with the same format as "mytable" you have? Give those tables another class name and your troubles are ended. Regex is your friend to do changes.

il_mix · 09-29-2020, 01:32 AM

I admit I'm not very expert in HTML/CSS. I hoped for some "don't rescale" attribute. Looks like there's none.
I'm writing a (python) script that converts several fancy HTML pages in more minimal XHTML for ereaders. Since the tables are kinda random with their content, I preferred a "generic" approach. Looks like I have to add an extra check that class-ify a table if it has images in the first column.
Will experiment with that.

Thanks

09-28-2020, 10:37 AM	#5
il_mix Enthusiast Posts: 39 Karma: 20178 Join Date: Jun 2013 Device: Kobo Touch	Ok, maybe I should have clarified beforehand why I used "height" instead of "width"... When I set Code: width: 100%; (with or without !important) I get small images even in browser. Setting Code: height: 100%; I see original sized images in browser. That's why I opted for height in the EPUB, too. Anyway, I've tested these options, with various results (none is ok); Code: width: 100%; Images are shrinked. Same adding !important Code: height: 100%; Images have original height, but are shrinked in width. Same adding !important Code: height: 100%; width: 100%; Images have original height, but are shrinked in width. Same adding !important Regarding @RbnJrg hint, I prefer a more generic approach. I can have tables, with the same format as mytable, but have just text in the first column. So, I don't want to set a specific width for the first column. I want it to stretch given the image width (if any). This way I can avoid class-ification of the tds that contain images. NOTE: in my former example I stated that the images are shrinked (in both width and height) when setting "height" attribute in CSS. I've noticed a typo in my CSS Code: height: 100%! important; instead of Code: height: 100% !important; That's probably why I had a different result with respect to this message recap; the CSS was probably ignored due to the error.

09-28-2020, 12:44 PM	#6
jhowell Grand Sorcerer Posts: 7,031 Karma: 91577715 Join Date: Nov 2011 Location: Charlottesville, VA Device: Kindles	What you are doing seems like a wrong approach. Specifying an image width or height in percent says to make it a percentage of the enclosing block, the table cell in this case. The image will end up being sized based on the other content in the table, not based on the image itself. You should instead do something like set the table cells to each be a certain percentage of the screen width and then have the image take up 100% of the enclosing cell width. Last edited by jhowell; 09-28-2020 at 12:46 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
4.11.1 right click img in editor to edit img	rjwse@aol.com	Calibre	1	02-21-2020 09:29 PM
Some files.html & toc.xhtml (also Cover.xhtml)	chaot	Workshop	23	02-13-2017 12:20 PM
New Kindle Ereader 5.8.2 firmware improve tables experience	Julius Caesar	Amazon Kindle	19	08-24-2016 05:56 AM
<img longdesc=	traskilajussi	EPUBReader	3	02-23-2011 08:15 AM
vfat.img	pewterbot9	enTourage Archive	11	12-29-2010 06:41 PM

09-26-2020, 09:48 AM	#2
Quoth Still reading Posts: 13,698 Karma: 103837201 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper	Use width?

09-29-2020, 01:32 AM	#9
il_mix Enthusiast Posts: 39 Karma: 20178 Join Date: Jun 2013 Device: Kobo Touch	I admit I'm not very expert in HTML/CSS. I hoped for some "don't rescale" attribute. Looks like there's none. I'm writing a (python) script that converts several fancy HTML pages in more minimal XHTML for ereaders. Since the tables are kinda random with their content, I preferred a "generic" approach. Looks like I have to add an extra check that class-ify a table if it has images in the first column. Will experiment with that. Thanks

Advert

Advert