Avoir la même taille d'image

Par bobazaza, il y a 10 ans

Les bases HTML/CSS

Bonjour,

j'assaie de faire une liste de personne avec une image par personne sauf que si je définie la taille dans le css (img) il y en a une qui reste plus petite que l'autre

Ce que je veux

Avoir la même taille dimage

Ce que j'obtiens

les images se redimentionnent si je change les tailles mais elles n'ont pas la même taille l'une par rapport à l'autre

16 réponses

Benjamin Derepas, il y a 10 ans

Montres nous ton code peut être non ?

bobazaza, il y a 10 ans
<body> <div class="lettre"> <?php foreach(range('A','Z') as $i): ?> <?php echo $html = "<a href='/facemash/personnes/display/".$i."'>".$i."</a>"; ?> <?php endforeach; ?> </div> <div class="row"> <?php foreach($p as $pers): ?> <div class="col-sm-6 col-md-3" > <div class="thumbnail"> <?php echo $this->Html->image($pers['Personne']['photo'],array('class' => 'imageActeur'))?> <div class="caption"> <h3> <div class="nomActeurListe"> <?php echo ucfirst($pers['Personne']['prenom'])." ".ucfirst( $pers['Personne']['nom']); ?> </div> </h3> <div class="boutonListe"> <button class="btn btn-primary" role="button"> <?php echo $this->Html->link('Visiter',array('controller' => 'personnes', 'action' => 'view', $pers['Personne']['id']),array('class'=>'bouton')); ?> </button> <button class="btn btn-primary" role="button"> <?php echo $this->Html->link('Modifier',array('action' => 'modif', $pers['Personne']['id'] ),array('class'=>'bouton')); ?> </button> </div> </p> </div> </div> </div> <?php endforeach;?> </div> <?php $modifier = $this->Html->link('Modifier',array('action' => 'modif', $pers['Personne']['id'])); ?> <?php $supprimer = $this->Form->postLink('supprimer',array('action'=>'delete',$pers['Personne']['id']),array('confirm',array('êtesvous sur?',$pers['Personne']['nom']))); ?> </body>
betaWeb, il y a 10 ans

Salut,

Il faut que tu nous montres ton CSS, sinon on ne pourra pas t'aider.

Cela dit, une piste intéressante pourrait être de fixer la largeur minimum de l'élément .thumbnail à 100% de celle du parent :

.thumbnail { min-width: 100%; }
bobazaza, il y a 10 ans

j'utilise bootsrap sinon j'ai fait une page style juste pour l'image :
img.imageActeur{
width:200px;
}

caoua, il y a 10 ans

Il s'agit d'un problème d'homothétie.
En effet, si d'une photo à une autre, elles ont des rapports largeur/hauteur différente, il est évident que pour l'affichage d'une dimension d'un côté donnée pour les deux photos, l'autre côté ne sera pas le même.

Pour résoudre ton problème, tu dois recadrer tes photos avec un rapport largeur/hauteur identique avant de les afficher. Par exemple, une pourrait faire 10x7, une autre 5x3.5, encore une autre de 20x14 ! Ainsi lorsque tu les afficheras avec une largeur ou hauteur définie, l'autre côté sera du même rapport et donc auront toute la même largeur et hauteur.

L'idéal est lors de l'upload d'une image sur ton site, un recadrage se fasse de manière automatique.

betaWeb, il y a 10 ans

Essaye ceci alors :

.thumbnail { min-width: 100%; height: 100%; } .thumbnail img.imageActeur{ width: 200px; display: block; margin: 0 auto; }

Après le souci est que tes images n'ont pas toutes la même hauteur, donc soit tu règles ce problème, soit tu passe par une solution background-image.

Ex. : http://codepen.io/betaweb/pen/PNQjWG

bobazaza, il y a 10 ans

ça ne marche pas et je ne dois pas changer .thumbnail car c'est toute la case avec les boutons :/

betaWeb, il y a 10 ans

Essaye d'être plus précis car là on ne va pas pouvoir t'aider.

Benjamin Derepas, il y a 10 ans

Tu peux sinon regarder du coté de la propriété object fit (non pris en charge par ie) .

bobazaza, il y a 10 ans

en gros le thumbnail englobe l'image le titre et les deux boutons donc si l'on modifie tout va être chambouler

betaWeb, il y a 10 ans

Eh bien à ce moment là wrap ton image d'une div qui fait 100% de la largeur du parent et définis lui une hauteur max et voilà ;)

bobazaza, il y a 10 ans

c'est ce que j'ai fait mais l'image sort complétement du cadre ^^' (bootstrap un peu nel je trouve ^^)

bobazaza, il y a 10 ans

quand je mets
height:100px;
width:50px;
max-width: 100%;
max-height: 100%;

la photo 1 j'ai 5074.625 px
la photo2 j'ai 5066.625 px

bobazaza, il y a 10 ans

c'est bon j'ai trouvé ! Dans fichier bootstrap.css
ligne =>".thumbnail > img," il faut l'enlever

betaWeb, il y a 10 ans

Euh non ce n'est pas la solution ! Là tu vas override le fichier CSS de Bootstap tu risques de provoquer des comportements non souhaités.