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.