Lesson: lesson-images

This example shows bitmap images and SVG graphics in original size and scaled down together with some CSS transformations. Some converters like PDFreactor and Antennahouse also support PDF as image format.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
Supports PDF as image format
PrinceXML
OK
Download
Does not support PDF as image format
Antennahouse
OK
Download
Supports PDF as image format
Vivliostyle
OK
Download
Does not support PDF as image format

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@import url("../styles/a4.css");

img {
    display: block;
    margin-bottom: 1em;        
}

h1 {
    page-break-before: always;
}

.image-100 {
    width: 100%
}

.image-50 {
    width: 50%
}

.image-30 {
    width: 30%
}

.rotate-45 {
    transform: rotate(45deg)        
}

.rotate-90 {
    transform: rotate(90deg)        
}

.rotate-135 {
    transform: rotate(135deg)        
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <h1>Bitmap</h1>
        <img src="kanguru.jpg" class="image-100"/>
        <img src="kanguru.jpg" class="image-50"/>
        <img src="kanguru.jpg" class="image-30"/>

        <h1>SVG</h1>
        <img src="sample.svg" class="image-100"/>
        <img src="sample.svg" class="image-50"/>
        <img src="sample.svg" class="image-30"/>

        <h1>Bitmap</h1>
        <img src="kanguru.jpg" class="image-100 rotate-45"/>
        <img src="kanguru.jpg" class="image-50 rotate-90"/>
        <img src="kanguru.jpg" class="image-30 rotate-135"/>
    
        <h1>PDF</h1>
        <img src="kangaroo.pdf" class="image-100 rotate-45"/>
        <img src="kangaroo.pdf" class="image-50 rotate-90"/>
        <img src="kangaroo.pdf" class="image-30 rotate-135"/>
    </body>
</html>