You could try wrapping the images in an svg wrapper. Adjust the '1000' width and '1500' height to match the images you are using in both places where they are used. The last time I did something similar, 90% of the images were the same size so a simple copy/paste/edit image file name did most of the work.
Code:
<style type="text/css">
@page {padding: 0; margin:0;}
body { text-align: center; padding:0; margin: 0; }
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1500" width="1000" xlink:href="../Images/image001.jpeg"/></svg>
</div>