Quote:
Originally Posted by JSWolf
Are these full screen images or are they just images that fit in with the text?
Also, can you show us the CSS and the relevant HTML code?
|
I am pointing to images that have a page for their own each.
This is the code of a html page with such a picture:
---------------------------------
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="" xml:lang="">
<head>
<title>index</title>
<meta name="generator" content="pdftohtml 0.36"/>
<meta name="date" content="2022-05-20T13:28:03+00:00"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="page_styles.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class="calibre">
<p class="calibre1"><a id="p6"></a><img src="index-6_1.jpg" alt="Image 2" class="calibre2"/></p>
</body>
</html>
---------------------------------
Just a note.... all pictures in the PDF were png files. Obviously, Calibre changed them to jpg files (and gave them another name).
This is the page_styles.css:
----------------------------------
@page {
margin-bottom: 0;
margin-top: 0
}
@font-face {
font-family: "Times New Roman";
panose-1: 2 2 6 3 5 4 5 2 3 4;
src: url(fonts/Times-New-Roman.ttf)
}
@font-face {
font-family: "Times New Roman";
panose-1: 2 2 8 3 7 5 5 2 3 4;
src: url(fonts/Times-New-Roman-Bold.ttf);
font-weight: bold
}
@font-face {
font-family: "Times New Roman";
panose-1: 2 2 5 3 5 4 5 9 3 4;
src: url(fonts/Times-New-Roman-Italic.ttf);
font-style: italic
}
@font-face {
font-family: "Times New Roman";
panose-1: 2 2 7 3 6 5 5 9 3 4;
src: url(fonts/Times-New-Roman-Bold-Italic.ttf);
font-weight: bold;
font-style: italic
}
---------------------------------
And this the stylesheet.css:
---------------------------------
ody {
widows: 1;
orphans: 1;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: justify;
}
img {
max-height: 100%;
max-width: 100%;
}
.cover {
text-align: center;
text-indent: 0;
height: 100%;
}
.calibre {
display: block;
font-family: "Times New Roman", serif;
font-size: 1.29167em;
line-height: 1.2;
padding-left: 0;
padding-right: 0;
margin: 0 5pt
}
.calibre1 {
display: block;
margin: 1em 0
}
.calibre2 {
height: auto;
width: auto
}
.calibre3 {
font-weight: bold
}
.calibre4 {
font-style: italic
}
.calibre5 {
display: block;
font-size: 1.54839em;
font-weight: bold;
line-height: 1.2;
margin: 0.67em 0
}
.calibre6 {
display: block;
list-style-type: disc;
margin-bottom: 0;
margin-right: 1em;
margin-top: 0
}
.calibre7 {
display: list-item
}
.calibre8 {
display: block;
list-style-type: circle;
margin-bottom: 0;
margin-right: 0;
margin-top: 0
}
----------------------------------
You see, I added your piece of CSS.
Kind regards,
Gunivortus