I'm currently creating an illustrated ebook in Sigil, and have sort of worked out the html and css for the text and headings. Unfortunately, I'm completely stuck when it comes to the images.
My idea for the images, is for them to occupy the whole screen, either like the cover does, or else just as a whole page. I also want it to scale so that the aspect ratio remains the same. Thus, the image needs to scale to fit either the height or the width, whichever prevents the image from being cropped. As the images are contained within the chapter, I would prefer to NOT create a separate *.xhtml file for each image.
I would also like to keep my inline css as basic and short as possible. (I would prefer to use the separate css file for this.
If I try to use an inline <div> and <img> tags within the <body>, the image won't scale any smaller than the width of the original image. I just get scrollbars.
When I try to use <svg> (which I know nothing about, but was copying instructions from the web) I end up with huge white bars above and below the image.
In both cases, the image breaks itself to display over two pages.
Could someone please help, by telling me,
1) what image format is best for epubs (jpg, png, svg, etc)
2) the best coding to make the images do what i want (and explain what each part means)
I realise I am asking for a lot, but I really am stuck.
:thanks: :thanks: :help: :thanks: :thanks:
My Html for inline images was:
and the css was:
My idea for the images, is for them to occupy the whole screen, either like the cover does, or else just as a whole page. I also want it to scale so that the aspect ratio remains the same. Thus, the image needs to scale to fit either the height or the width, whichever prevents the image from being cropped. As the images are contained within the chapter, I would prefer to NOT create a separate *.xhtml file for each image.
I would also like to keep my inline css as basic and short as possible. (I would prefer to use the separate css file for this.
If I try to use an inline <div> and <img> tags within the <body>, the image won't scale any smaller than the width of the original image. I just get scrollbars.
When I try to use <svg> (which I know nothing about, but was copying instructions from the web) I end up with huge white bars above and below the image.
In both cases, the image breaks itself to display over two pages.
Could someone please help, by telling me,
1) what image format is best for epubs (jpg, png, svg, etc)
2) the best coding to make the images do what i want (and explain what each part means)
I realise I am asking for a lot, but I really am stuck.
:thanks: :thanks: :help: :thanks: :thanks:
My Html for inline images was:
Code:
<div class="inline">
<img alt="" src="../Images/Image_04.png"/>
</div>Code:
div.inline {
height:99%;
width:100%;
page-break-inside:avoid;
text-align:center;
}
div.inline
img {
display:inline-block;
height:100%;
margin:0 auto;
}