I use variants of the settings below to display images without or with aspect ratio changes.
Code:
/* default general settings */
@page {margin:0;}
body {margn:0;padding:0;}
p,div{margin:0;padding:0;}
/* images */
/* keep aspect ratio */
.vertical-img {max-height:100%;height:100%;width:auto;}
.horizontal-img {max-width:100%;width:100%;height:auto;}
Note: there is no need to add width:auto or height:auto. I've added this to stress that the images are displayed with their original aspect ratios.
Code:
/* full screen distorted aspect ratio */
.fullscreen-img {max-height:100%;height:100%;width:100%;max-width:100%;}