/*
Le but : reproduire le même effet qu’on a quand Firefox affiche une image seule dans un onglet, en pure CSS.

Les conditions suivantes doivent être toujours vraies :
– l’image est toujours entièrement visible ;
– l’image est toujours dans ses proportions naturelles (pas de déformations)
– l’image est toujours centrée, sur les deux axes.

En pratique :
– quand l’image est plus grande que le viewport, l’image est redimensionnée en conservant ses proportions et en restant centrée ;
– quand l’image est plus petite que le viewport, l’image est affichée dans ses dimensions naturelles, centrée sur les deux axes



*/

#container {
    max-height: 100%;
}

#container img {
    /* Keeps image from going outside the screen */
    max-height: 100%;
    max-width: 100%;
    /* Keeps image from beeing distorted */
    height: auto;
    width: auto;
    /* centering horizontally AND vertically */
    /* 50% of container */
    position: relative;
    top: 50%;
    left: 50%;
    /* 50% of image */
    transform: translate(-50%,-50%);
}