Quote:
Originally Posted by RbnJrg
|
I understood the logic behind your tutorial, but setting my image to take up the entire available dimension on the screen, like a cover, wasn't exactly what I was looking for, although it was helpful to learn a new approach.
Anyway, your code was useful because I finally managed to align my image in the center of the screen, without it being resized by svg to occupy the entire width and height of the device thanks to incorporating your css into my html svg, like this:
Code:
<head>
<title></title>
<style>
.cover {
margin: 0;
height: 99vh; /* This property is for epub3 */
max-width: 100%; /* This property is for epub3 */
overflow: hidden !important;
}
.picWrapper {
margin: 0;
padding: 0;
height: 100%; /* This property is for epub3 */
}
.pic { /* This is the epub2 layer */
display: block;
margin: auto;
width: 100%;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
</style>
</head>
<body class="cover">
<div style="text-align: center;" class="picWrapper">
<svg class="pic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 400 442" preserveAspectRatio="xMidYMid meet">
<image xlink:href="images/draconisgaleon.jpg" x="25%" y="25%" width="50%" height="50%" />
</svg>
</div>
</body>
I made two gifs with the before and after for better understanding.
The result I want is being displayed in the "after" gif.
Note that I had marked my stylesheet.css in the header as a comment, to show you how the svg was behaving before incorporating your css suggestion. After removing the comment, the css came to contribute to the final result.
I must thank him for that.
It's resolved.