Le Hollandais Volant

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


Le code :

#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%);
}

Démo : http://lehollandaisvolant.net/tout/examples/center/

PS : Je me suis aperçu de ça plus tard, mais dans ma page de démo, je suis en mode Quircks. Il n’y a pas de "DOCTYPE html" pour passer en HTML5.
Le code fonctionnement donc directement.

Si vous êtes en HTML et que votre page n’affiche rien d’autre qu’une image au centre d’une page, alors il faudra ajouter un "height: 100%" au "body", sinon l’image sera centrée horizontalement mais pas verticalement.

Ceci vient du fait qu’en HTML5, le body et le html n’occupent que la place qu’ils occupent, alors qu’avant le html occupait toujours 100% de la hauteur de la page.