1 - Image fullscreen en css
sans que l’image ne perde son ratio
dépassement de l’écran (ni verticalement, ni horizontalement), donc s’affichant au maximum à l’écran.
sans sur-zoomer l’image
sans JavaScript

HTML, CSS :
<div id="d1">
  <div>
    <img src="image.jpg"/>
  </div>
</div>
#d1 {/* dans le cas d’une lightbox, j’ai ça pour pas que ça dépasse de l’écran */
   position: fixed;
   top: 5%; right: 5%; bottom: 5%; left: 5%;
}

#d1 div img {
   max-width: 100%; max-height: 100%;
   width: auto;
   height: auto;
}

#d1 div {
   width: 100%; height: 100%;
   display: inline-block; /* lui il est important */
}