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.
Repository files
PDF files
OK
.svg){kind=icon}
OK with issues
Error
Unsupported
HTML input
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Bitmap</h1>
<img src="pic/kanguru.jpg" class="image-100"/>
<img src="pic/kanguru.jpg" class="image-50"/>
<img src="pic/kanguru.jpg" class="image-30"/>
<h1>SVG</h1>
<img src="pic/sample.svg" class="image-100"/>
<img src="pic/sample.svg" class="image-50"/>
<img src="pic/sample.svg" class="image-30"/>
<h1>Bitmap</h1>
<img src="pic/kanguru.jpg" class="image-100 rotate-45"/>
<img src="pic/kanguru.jpg" class="image-50 rotate-90"/>
<img src="pic/kanguru.jpg" class="image-30 rotate-135"/>
<h1>PDF</h1>
<img src="pic/kangaroo.pdf" class="image-100 rotate-45"/>
<img src="pic/kangaroo.pdf" class="image-50 rotate-90"/>
<img src="pic/kangaroo.pdf" class="image-30 rotate-135"/>
<h1>Rounded portrait</h1>
<img src="pic/face.png" class="portrait"/>
<img src="pic/face.png" class="portrait round-25"/>
<img src="pic/face.png" class="portrait round-50"/>
</body>
</html>
Stylesheet
@import url("../styles/a4.css");
img {
display: block;
margin-bottom: 1em;
}
h1 {
break-before: page;
}
.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)
}
.portrait {
width: 30%;
height: auto;
}
.round-25 {
border-radius: 25%;
}
.round-50 {
border-radius: 50%;
}