I am preparing epubs of illustrated children's books.
There is one image per page, centered with no text.
Each page is a "chapter" in order to force a page break.
Originally I was using a simple code like this:
xhtml:
Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p style="text-align: center;"><img alt="03_a" src="../Images/03_a.jpg" /></p>
</body>
</html>
But there were some people who couldn't view the epub correctly (eg. those with nook readers or Adobe Digital Editions)
So now I am trying a new code using CSS and I need good tips.
New code:
XHTML:
Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="centrado"><img alt="03_a" class="imagenes1" src="../Images/03_a.jpg" /></div>
</body>
</html>
CSS:
Code:
html, body {
height: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
@page {
margin: 0pt;
}
div.centrado {
margin: 0px auto 0px auto;
text-align: center;
}
img.imagenes1 {
height: 800px;
width: 800px;
}
img.imagenes2 {
height: 800px;
width: 800px;
max-width: 100%;
}
img.imagenes3 {
height: 800px;
width: 800px;
max-width: 100%;
max-height: 100%;
}
img.imagenes4 {
max-width: 100%;
max-height: 100%;
}
img.imagenes5 {
max-width: 100%;
}
img.imagenes6 {
height: 800px;
width: 800px;
max-width: 100%;
max-height: 100%;
}
img.imagenes7 {
height: 800px;
width: 800px;
width: 100%;
height: 100%;
}
img.imagenes8 {
height: 800px;
width: 800px;
width: 100%;
}
img.imagenes9 {
width: 100%;
}
img.imagenes9 {
max-width: 800px;
}
I made this test version and tested it in ADE to see which images display the best. The images: img.imagenes5 and img.imagenes9 seem correct.
Which image tag would be the right one to use? Anything I can do better?
Note: In order for the artwork to have an acceptable quality the images are optimized at 800px, reducing image size is not really an option.
Live example of the first version in google play (the one with viewing problems) :
https://play.google.com/books/reader...=es&pg=GBS.PP1
Thanks for your help.