Avoir la même taille d'image

bobazaza
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

bobazaza
Auteur
Réponse acceptée

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

bobazaza
Auteur

j'ai ceci:

http://image.noelshack.com/fichiers/2016/15/1460367295-capture.png

Benjamin Derepas

Montres nous ton code peut être non ?

bobazaza
Auteur 
<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

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
Auteur

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

caoua

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

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
Auteur

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

betaWeb

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

Benjamin Derepas

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

bobazaza
Auteur

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

betaWeb

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
Auteur

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

bobazaza
Auteur

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

betaWeb

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.