Aligner verticalement une image plus grande dans un div

Version imprimable

25/04/2014, 19h31
c13303

Aligner verticalement une image plus grande dans un div

Bonjour à tous,
Je me heurte au problème suivant :
j'aimerais centrer verticalement une image dans un div.

Ceci fonctionne lorsque l'image est plus petite :
http://jsfiddle.net/Cthulhu/QHEnL/1/

Mais pour une image plus grande (qui sera tronquée par un overflow:hidden sur le div container) cela ne marche plus, l'image se ferre en haut à gauche. Exemple : http://jsfiddle.net/Wjxy8/1/

J'ai parcouru tout google sans succès, essayé avec des <td>, des div "helper", .... rien à faire ...

J'ai également réussi en utilisant la propriété background-image naturellement, mais cette solution est déplaisante car en l'absence d'une vraie image cela est mal reconnu par facebook par exemple .. J'aimerais donc réussir avec une balise <img>

Quelqu'un aurait une idée? :-)

Merci !
25/04/2014, 20h13
NoSmoking

Bonjur,

Citation:

J'ai parcouru tout google sans succès,

certes mais pas la:faq: Comment centrer verticalement un élément block ?
26/04/2014, 03h53
CCyrillus

bonjour/bonsoir.

quelque chose comme ça ? http://codepen.io/gcyrillus/pen/BdtEj

Qui donnerait ceci : http://jsfiddle.net/Wjxy8/2/

Le principe est de donnée à l'image une taille virtuelle de 0 .
les marges négatives qui lui sont appliquées réduisent l'espace qu'il lui est nécessaire pour s'afficher et ne vient pas se 'cogner' contre les bords mais les absorbe :)

Hello,

Je n'ai jamais aimé été très convaincue par la technique de centrage utilisant le line-height Je l'ai toujours considéré comme une forme de "magouille" (au même titre que l'ajout d'un overflow, pourtant bien pratique, dans l'unique but de gérer les flottants par exemple). Peut-être à tort ?

En tous cas, l'espacement prévu pour l'empattement pose problème dans ton exemple de base. Attribue une hauteur de 120px à ton image pour constater que le centrage vertical est imprécis... :-/ c'est d'ailleurs d'autant plus flagrant en fonction du font-size par défaut de l'utilisateur; on visualise bien le problème avec un zoom texte seul sur FF (sauf erreur un font-size de 0 permet d'éviter le problème, hors zoom text seul ;p)

Pour ma part, c'est typiquement le genre de situation que je résoudrais par un centrage en absolute. L'idée est d'utiliser les marges auto pour le centrage, ce qui fonctionne en attribuant, en général, la valeur de 0 aux 4 propriétés de positionnement top, bottom, right et left. Sauf qu'avec 0, on obtiendra le même problème que toi; une image plus grande se collera au haut à gauche et donc le coin haut gauche sera affiché.

L'idée est donc d'attribuer les mêmes valeurs négatives à top et bottom,right et left pour maintenir le centrage sur une image plus grande (au minimum la moitié des dimensions de l'image la plus grande) en "élargissant" la surface à disposition. Par exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .img_thumb { float: left; height: 120px; margin-bottom: 5px; margin-left: 9px; width: 147px; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; position:relative; overflow:hidden; } .img_thumb img { position:absolute; margin:auto; top:-2000px;left:-2000px;right:-2000px;bottom:-2000px; }
Le - est la rétocompatiblité: IE8 +. Si IE7 accepte le renseignement des propriétés opposées (top et bottom, left et right, contrairement à IE6 qui ne sais pas quoi en faire), il est incapable d'effectuer le centrage avec les marges auto... Donc à gérer pour que l'information soit tout de même accessible IE7- (genre en supprimant les valeurs négatives pou eux et osef du centrage)

27/04/2014, 02h48
CCyrillus

Si l'option est d'utiliser le positionnement absolu pour du clippage, autant se servir de clip https://developer.mozilla.org/fr/docs/CSS/clip compatible depuis IE4 et version 1 des autres navigateurs. c'est depuis CSS2 , il me semble .

++
27/04/2014, 12h19
Candygirl

Il est vrai que je voyais la propriété clip moins rétrocompatible que ça. J'imagine que j'avais dû foirer mes tests à l'époque ^^

Par contre j'imaginais que la problématique reposait sur le centrage d'une image de taille indéterminée. A première vue, je ne vois pas comment déterminer les coordonnées pour le clip d'un rectangle de taille précise centré sans tenir compte des dimensions de l'image ?
27/04/2014, 14h24
rodolphebrd

Candygirl : n'as-tu pas une réponse sur cet article : http://tympanus.net/codrops/2013/01/...clip-property/

Salut au fait...
27/04/2014, 20h11
CCyrillus

Citation:

Envoyé par Candygirl

Il est vrai que je voyais la propriété clip moins rétrocompatible que ça. J'imagine que j'avais dû foirer mes tests à l'époque ^^

Par contre j'imaginais que la problématique reposait sur le centrage d'une image de taille indéterminée. A première vue, je ne vois pas comment déterminer les coordonnées pour le clip d'un rectangle de taille précise centré sans tenir compte des dimensions de l'image ?

tout à fait :) , d'où ma proposition sur un line-height ( hauteur connue du parent ) et d'une réduction de l'espace d'affichage requis de l'image via des marges négatives.

Le positionnement absolu à fait ses preuves et est bien connu, j’apportai un autre point de vu, aucun n'as ma préférence.
.

++
27/04/2014, 21h49
Candygirl

Citation:

Envoyé par rodolphebrd

Candygirl : n'as-tu pas une réponse sur cet article : http://tympanus.net/codrops/2013/01/...clip-property/

Ben euh...non :calim2: Tu me fais un exemple ? ;)

Citation:

Envoyé par rodolphebrd

Salut au fait...

Coucou aussi ^^

Citation:

Envoyé par CCyrillus

tout à fait :) , d'où ma proposition sur un line-height ( hauteur connue du parent ) et d'une réduction de l'espace d'affichage requis de l'image via des marges négatives.

Que je trouve fort intéressant comme nombre de tes propositions que j'aime toujours découvrir ;)

Citation:

Envoyé par CCyrillus

Le positionnement absolu à fait ses preuves et est bien connu, j’apportai un autre point de vu, aucun n'as ma préférence.

Je pense que le centrage d'un absolut avec les marges auto, particulièrement intéressant sur les images, est justement assez peu connu et mérite d'être énoncé, tout comme la problématique de l'imprécision du centrage avec le line-height, présente dans la plus part des exemples exposés mais rarement relevée.

Citation:

Envoyé par Candygirl

Tu me fais un exemple ? :wink:

Oui mais avec la propriété transform qui est moins rétrocompatible. /^o^\

Code:

1
2
3
4
5
<div class="box">    
  <div class="content">
   <img src="http://lorempixel.com/400/400/animals/9" />
  </div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
.box {
    position:relative;
    width: 300px; 
    margin: 0 auto; 
    height: 200px;  
 }
.content img {
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

http://codepen.io/anon/pen/dHvLc

28/04/2014, 10h23
Candygirl

Tricheur !! ;p

En dehors de la rétrocompatibilité, j'aime beaucoup l'utilisation du translate dont l’utilisation me semble bien correspondre à la logique de la situation :ccool: