You can use the same SVG wrapper used for covers, like suggested on the topic you referred to.
This is the code I use for EPUB3 (like your examples):
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="pt-BR" xml:lang="pt-BR">
<head>
<title>Capa</title>
<style type="text/css">
@page {
padding: 0pt;
margin: 0pt;
}
body {
padding: 0pt;
margin: 0pt;
column-count:1;
}
div.Cover {
text-align: center;
padding: 0pt;
margin: 0pt;
height: 100vh;
}
</style>
</head>
<body>
<section epub:type="cover" aria-labelledby="book_cover" aria-describedby="cover_desc">
<div class="Cover">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1362 1958" role="img">
<title id="book_cover">Capa do livro A comunidade secreta</title>
<desc id="cover_desc">Garota andando por uma estação ferroviária, com o trem ao seu lado soltando fumaça</desc>
<image height="1958" width="1362" xlink:href="../Images/cover00335.jpeg"/>
</svg>
</div>
</section>
</body>
</html>
This works for any full page image. Its centered horizontally and vertically. It keeps the original ratio. Just change the height and width values accordingly.