Centrage vertical dans une DIV

Résolu
heliconius Messages postés 540 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 24 février 2023 - 15 juil. 2022 à 15:58
heliconius Messages postés 540 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 24 février 2023 - 16 juil. 2022 à 12:14

Bonjour,

NB :
Bien que cette question comprenne une partie de code PHP et son résultat HTML,
la question porte sur du CSS.

Je fais une galerie de photos dans un répertoire. Dans ce répertoire, outre les photos (dont le nombre est variable), il n'y a qu'un fichier PHP (index.php) qui va lire le contenu du répertoire et afficher les photos qui s'y trouvent. Certaines photos ont été prises en mode paysage, d'autres en mode portrait.

Pour éviter un affichage approximatif, je fais le choix d'afficher chaque photo dans une DIV de 300px sur 300px. Si la photo est prise en mode paysage, la largeur est réduite à 300px, si elle a été prise en mode portrait, c'est la hauteur qui est réduite à 300px. Jusque là, ça le fait correctement.

La DIV de 300x300 possède un style pour que la photo en mode portrait soit centrée horizontalement et ça, c'est bon ; et que la photo en mode paysage soit centrée verticalement et ça, je n'y arrive pas. Sa largeur est bien réduite à 300px mais la photo est affichée en haut de la DIV.

Code PHP :

function redim($info) {
    $larg = $info[0];
    $haut = $info[1];
    if($larg > $haut) { $dim = "width=\"300\"";  /* mode paysage */  }
    else              { $dim = "height=\"300\""; /* mode portrait */ }
    return $dim;
}
function showpics() {
    if ($handle = opendir('.')) {
        while (false !== ($file = readdir($handle))) {
            if ($file != "." && $file != ".." && $file != "index.php") {
                $infoimg = @getImageSize("./$file");
                $dim = redim($infoimg);
                echo "   <div class=\"pic\">";
                echo "<a href=\"$file\" target=\"_blank\"><img src="""$file\" ".$dim." /></a></div>\n";
            }
        }
    closedir($handle);
    }
}

Cela donne ce HTML :

<div id="pics">
   <div class="pic"><a href="img1.jpg" target="_blank"><img src="" width="300" /></a></div>
   <div class="pic"><a href="img2.jpg" target="_blank"><img src="" height="300" /></a></div>
   <div class="pic"><a href="img3.jpg" target="_blank"><img src="" width="300" /></a></div>
   <div class="pic"><a href="img4.jpg" target="_blank"><img src="" height="300" /></a></div>
</div>

NB : l'attribut scr de la balise img contient bien img1.jpg, img2.jpg, etc. mais n'est pas ici affiché. (Pourquoi ?)

Le CSS correspondant :

#pics {
    display: table-cell;
    vertical-align: middle;
}
#pics .pic {
    width: 300px;
    height: 300px;
    border: 1px solid #808080;
    background-color: #FFE0E0;
    text-align: center;
    vertical-align: middle;
    float: left;
    margin: 5px;
}

J'ai bien essayé de rajouter une fonction PHP qui calcule le pourcentage de réduction utilisé pour ramener la largeur à 300, histoire de calculer la nouvelle hauteur pour appliquer un style sur la photo elle même :
-- margin-top: (300 - nouvelle hauteur)/2
-- position relative et absolute et avec un top de ce calcul
Je n'y arrive pas.

La fonction PHP :

function top($l,$h) {
    $pc = 30000/$l;       // Pourcentage de réduction
    $nh = ($h * $pc)/100; // Nouvelle hauteur
    return (300-$nh)/2;
}

Du coup, je l'ai enlevée puisque ça ne changeait rien.

Quelqu'un a-t-il une idée des styles à appliquer (ou autre solution) pour centrer verticalement une photo en mode paysage dans sa DIV ?

Merci pour votre aide.


Windows / Firefox 102.0


1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 545
15 juil. 2022 à 16:59

Bonjour,

Tu devrais plutôt regarder du coté de la propriété css object-fit avec la valeur contain qui devrait centrer automatiquement les images horizontalement et verticalement selon leur format : 

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit

0
heliconius Messages postés 540 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 24 février 2023 130
15 juil. 2022 à 18:12

Merci pour ta réponse.

Dans le code CSS de la DIV de class="pic"n j'ai placé object-fit avec pour valeur toutes celles qui sont indiquées (contain, cover, fill, none, scale-down). Aucune modification de l'affichage ni centrage vertical (même en vidant le cache du navigateur). J'ai essayé aussi avec object-position indiqué sur la page dont tu m'a donné le lien. Rien non plus..

J'ai résolu le problème en enlevant la DIV et en mettant un style sur les images ::

img {
	margin:4px;
	border:2px solid #FFFFFF;
	vertical-align:middle;
}

et ça correspond à ce que je veux. Je me compliquais la vie :-)

Mais merci pour ton aide.

0
Altea > heliconius Messages postés 540 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 24 février 2023
Modifié le 16 juil. 2022 à 01:12

Salut,

une solution simple est de donner des dimensions en % au contenant de l'image comme à l'image.

Ensuite vous jouez sur les marges pour centrer:

.imgCentrer{
width:80%;/** par défaut la hauteur sera aussi réduite à 80%*/
}

.containerImage{
margin-left:10%;
margin-right:10%;

}

<section class=containerImage>
<img href="..." alt="" class="imgCentrer">
</section>

 Voilà dans tous les cas l'image est au centre et fait 80% de son container(10%+80%+10%=100% attention avec l'épaisseur des bordures et selon les navigateurs cela peut être un peu différent donc ont peu utiliser des valeurs un peu inférieures comme 9.5%).

Pour changer la taille de l'image il suffit de changer la taille du container. Pour centrer verticalement faire la même chose avec height et les marges hautes et basses(top et bottom).

Sans donner de dimension au container l'image aura une taille de 80% celle du fichier et le container s'adapte(100% de la taille de l'image marges comprises).

1
heliconius Messages postés 540 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 24 février 2023 130 > Altea
16 juil. 2022 à 12:14

Merci pour ta réponse, je vais essayer aussi cette méthode et choisirai celle qui sera la lus simple avec le meilleur résultat.

Merci et bon week-end à tous.

0