Discussion :

[bloups0]

Bonjour,

Je bosse sur un petit site, et je dois centrer des images dans un div, actuellement, si l'image est plus grande que le block, j'affiche seulement le peux qui peut rentrer, sauf que sur certaine photo, cela ne sert a rien...

http://codepen.io/bloups0/pen/wWLmrW

Voilà mon code actuellement, si vous aviez des solutions !

Merci d'avance !

[Invité]

Bonjour,

Dans une autre discussion (restée sans réponse...!),je t'avais pourtant fourni un lien...

[bloups0]

Je n'arrive pas vraiment à m'en sortir avec ton code, je me souviens bien que tu me l'aies transmis, mais je n'arrive pas à l'intégrer à mon code...

[Invité]

1/ Inutile de "Répondre avec citation" un message complet : cliquez sur le bouton "+Répondre à la discussion" (en bas à gauche)
(Il me semble te l'avoir déjà dit)...

2/

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// ------------------------
// Centrage des images
function centerheight_img_newsbox(id) {
  $(id).find('figure img').css({'top':'0','left':'0','width':'100%', 'height':'auto'})
	$(id).each( function() {
      $(this).find('figure img').css({'width':'100%','height':'auto'})
    H_fig = $(this).height();
    H_img = $(this).find('figure img').height();
    if( H_img > H_fig )
    {
      H = Math.floor( (H_fig - H_img )/2 );
      $(this).find('figure img').css({'top':H+'px','left':'0'})
    } else {
      $(this).find('figure img').css({'width':'auto','height':'100%'})
      W_fig = $(this).width();
      W_img = $(this).find('figure img').width();
      W = Math.floor( (W_fig - W_img )/2 );
      $(this).find('figure img').css({'top':'0','left':W+'px'})
    }
	});
};
// ------------------------
$(window).on( 'load resize', function(){
  centerheight_img_newsbox('.relative');
});
// ------------------------

N.B. Si tu INDENTAIS correctement ton code HTML, tu te rendrais compte qu'il comporte des ERREURS, et qu'il peut ête SIMPLIFIE.

[bloups0]

Là je viens de remplacer ta balise <figure> par ma classe cadre, et j'ai aussi indentée mon code HTML, j'ai bien ma balise p.cadre contenu dans mon div relative, donc (.relative).find(p.cadre img) devrait donc marcher je pense, là j'ai pas trop de résultat, je sais pas trop pourquoi.

http://codepen.io/bloups0/pen/wWLmrW

Ops, j'avais peut être oublié d'inclure JQuery ! Merci pour le script, en faite, il n'était pas si terrible à intégrer !

Mais il ne fait pas exactement ce que je voulais, c'est à dire, garder la taille d'origine d'une image, mais le centrer en son centre, et rogner le reste avec l'overflow hidden, mais je pense pouvoir me contenter de ceci.

EDIT: Le code calcule une sorte de ratio, et permet de redimensionner sans déformer l'image, ou alors de centrer verticalement si j'ai bien compris ?

[Invité]

Ça fait les deux.

Une autre (meilleure ?) solution est de mettre cette image en background , avec background-size:cover;
Plus besoin alors de jQuery.

[bloups0]

Non mais c'est bon, la solution me convient parfaitement ! Encore merci pour l'aide.

[SpaceFrog]

Une autre solution moins compliquée en css: passe par le display table cell et ses possibilités d'alignement.