SVG way:
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<style type="text/css" title="override_css">
@page {
padding: 0;
margin: 0;
}
body {
text-align: center;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 768 1024" width="100%">
<image height="100%" width="100%" xlink:href="../Images/cover.jpg"/>
<text x="5" y="1024">Image Caption</text>
</svg>
</body>
</html>
Regular way (HTML4.01/EPUB2):
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<style type="text/css" title="override_css">
@page {
padding: 0;
margin: 0;
}
body {
text-align: center;
padding: 0;
margin: 0;
}
.image {
width: 100%;
}
</style>
</head>
<body>
<img src="../Images/cover.jpg" class="image"/>
</body>
</html>
Regular way (HTML5/EPUB3):
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<style type="text/css" title="override_css">
@page {
padding: 0;
margin: 0;
}
body {
text-align: center;
padding: 0;
margin: 0;
}
.image {
width: 100%;
}
</style>
</head>
<body>
<figure>
<img src="../Images/cover.jpg" alt="Cover" class="image">
<figcaption>Fig1. - Aan image caption.</figcaption>
</figure>
</body>
</html>
Did you consider using a fixed layout epub? that way you can have exactly what you want.