ToutSurTout.biz / [CSS] Note centrer une image dans un bloc

Philippe · Discussion postée le 31-07-2015 à 21:04:55

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

• Annonce ToutSurTout

Message 1 Discussion postée le 31-07-2015 à 21:04:55

[CSS] Note centrer une image dans un bloc

Code :