Centrer une image dans un div

Version imprimable

25/08/2016, 15h20
bloups0

Centrer une image dans un div

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 !
25/08/2016, 15h39
Invité

Bonjour,

Dans une autre discussion (restée sans réponse...!),je t'avais pourtant fourni un lien... :weird:
25/08/2016, 15h44
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...

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:

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.

25/08/2016, 16h25
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 ?
25/08/2016, 17h51
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.
25/08/2016, 17h53
bloups0

Non mais c'est bon, la solution me convient parfaitement ! Encore merci pour l'aide.
26/08/2016, 08h16
SpaceFrog

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