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