28255 sujets

CSS et mise en forme, CSS3

Hauteur variable d'un grid-item

Bonjour,

Cette discussion fait suite à ce sujet.

Ce codepen présente le problème.

Les dernières déclarations difficiles à lire ne servent qu'à faire fonctionner le carrousel, sans impact à ma connaissance sur la mise en page.

Mon problème est que la colonne de gauche du carrousel doit être aussi haute que la colonne de droite.

La solution la moins inesthétique et d'ajouter du padding en haut et en bas de l'image principale. Ou équivalent avec object-fit.

Dans le principe il y a une DIV dont je définis la taille, les image de tailles différentes viennent remplir la DIV avec object-fit.

Voyez-vous un code pour ajuster la hauteur du carrousel ?
Modifié par boteha_2 (02 May 2026 - 12:34)
Modérateur
Bonjour,

tu as par exemple : align-items:start; (équivalent à si tu mets tout les elements de la grille en margin-bottom:auto;) qui empeche ton carroussel de s'étirer sur la hauteur.

Voici une idée de reprise du css pour aussi étirer le div de .picture:

https://codepen.io/gc-nomade/pen/VYmYgdY

h1 {
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1.4em;
}

div.bloc_haut {
  display: grid;
  margin: 1rem 0;
  column-gap: 3rem;
}

figure.photos {
  grid-column: 1;
  grid-row: 1 / span 5;
  border: 1px solid green;
  padding: 0;
}

h1 {
  grid-column: 2;
  grid-row: 1;
}

h1 + p {
  grid-column: 2;
  grid-row: 2;
}

h1 + p + p {
  grid-column: 2;
  grid-row: 4;
}

ul.voir {
  grid-column: 2;
  grid-row: 3;
}

div > figure.photos {
  min-width: 10rem;
}

figure.photos > div:first-of-type,
figure.photos > img[tabindex]:focus + div,
figure.photos > img[tabindex]:hover + div {
  height: 9.5625rem;
}

figure.photos > img[tabindex] + div {
  outline: 1px solid red;
  margin-bottom: 1.5rem;
  cursor: zoom-in;
}

div.bloc_haut > div > img.picture {
  box-sizing: border-box;
  padding: 0.625rem;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

div.bloc_haut > figure.photos > img[tabindex] + div > img {
  box-sizing: border-box;
  padding: 0.625rem;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

figure.photos > img[tabindex] {
  padding: 5px;
  cursor: pointer;
  background-color: white;
  outline: 1px solid blue;
}

figure.photos {
  justify-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-template-rows: 1fr auto;
  gap: 1px;
  margin: 0;
}
figure.photos > div:has(.picture),
.picture {
  min-height: 100%;
  min-width: 100%;
}

figure.photos > div:first-of-type,
figure.photos > img[tabindex]:focus + div,
figure.photos > img[tabindex]:hover + div {
  grid-column: 1/-1;
  grid-row: 1;
  display: block;
}

/* Pour faire fonctionner le carrousel, sans impact sur la mise en page */

figure.photos > div:not(:first-of-type) {
  display: none;
}
figure.photos > img[tabindex]:focus {
  outline-color: red;
  z-index: 1;
}
figure.photos > img[tabindex]:hover {
  outline-color: red;
  z-index: 1;
}

.photos:has(img:not(:first-child):focus) > div:first-of-type > img {
  visibility: hidden;
}
.photos:has(img:not(:first-child):hover) > div:first-of-type > img {
  visibility: hidden;
}
.photos:has(img[tabindex]:first-child:hover) > div > img.picture {
  visibility: visible;
}
.photos:has(img[tabindex]:hover) > img:focus:not(:hover) + div > img {
  visibility: hidden;
}
Bonjour gcyrillus,

Merci pour ton suivi.

Si je suis, tes seuls changements sont :

dans div.bloc_haut
Tu enlèves align-items: start;

Dans figure.photos, tu ajoutes :
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
grid-template-rows: 1fr auto;

Et

figure.photos > div:has(.picture),
.picture {
min-height: 100%;
min-width: 100%;
}

Rien d'autre ?

Le résultat n'est pas exactement celui attendu.

Idéalement, la hauteur du div de l'image principale s'étend de façon à ce que la hauteur totale du carrousel soit égale à la hauteur de la colonne à droite.
Mais l'image garde sa taille.

J'y arrive quand il y a juste une image, pas un carrousel.
Voir ce codepen.

La hauteur du div de l'image est celle de la colonne de droite.
Mais la taille de l'image reste contrainte et les sortes de padding en haut et en bas sont des zones actives pour le click.

div.bloc_haut > div:has(>img.picture) {max-width: 23rem}


J'aimerais le même effet avec un carrousel à la place de l'image...

Pas trop confus j'espère.
Modifié par boteha_2 (02 May 2026 - 18:19)
Modérateur
Oups, Bonsoir, oui c'est cela en gros.

Ce que j'avais compris: centré le carrousel dans la hauteur .

Ce que je voulais te proposé : https://codepen.io/gc-nomade/pen/GgNJRyO
figure.photos {
  justify-content: start;
  place-content: center;/* ajout ici */ 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-template-rows: auto;
  gap: 1px;
  margin: 0;
}
figure.photos > div:has(.picture),
.picture {
  min-height: 100%;
  min-width: 100%;
}


Ou si tu préfere centré/ réduire le div conteneur à la largeur de l'image:

figure.photos > div:has(.picture) /*,
.picture*/ { /* le selecteur .picture est ici inutile */
  min-height: 100%;
  width: max-content;
  max-width:100%;
  margin: auto;
}


Cdt
Modifié par gcyrillus (03 May 2026 - 23:21)
Bonjour gcyrillus,

Merci de ta patience et de ton suivi.

Ce que tu proposes n'est pas exactement ce que je cherche.

Le carrousel doit être de même hauteur que la piste de droite.
Par une augmentation automatique de la hauteur de la DIV de l'image principale.
Sans que la taille de l'image ne soit augmentée.
Donc avec ajout de marges en haut et en bas.
Mais que ces marges soient active au click, comme un padding...

Il me semble que cela implique :

div.bloc_haut // stretch
figure.photos // grid-template-rows: 1fr auto;
figure.photos > img Smiley tabindex + div // height: 100 %

Ensuite comment traiter l'image dans ces div ?

Dans le copier-coller de ton codepen j'ai juste ajouté : figure.photos // grid-template-rows: 1fr auto.

Il me semble que le reste y était déjà.
Modérateur
boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ta patience et de ton suivi.

Ce que tu proposes n'est pas exactement ce que je cherche.

Le carrousel doit être de même hauteur que la piste de droite.
Par une augmentation automatique de la hauteur de la DIV de l'image principale.
Sans que la taille de l'image ne soit augmentée.
Donc avec ajout de marges en haut et en bas.
Mais que ces marges soient active au click, comme un padding...


Bonjour,

Heu , du coup je comprend pas ce que tu souhaites car la description semble correspondre au premier codepen proposé ?

cdt
Bonjour gcyrillus,

Merci pour le suivi.

Parles-tu de ce codepen ?

Ben non, ce n'est pas exactement l'effet voulu,

L'image 200 x 150 est coincée en haut de page.
L'image 400 x 300 c'est beaucoup mieux, notamment si je diminue la taille de la fenêtre.

Dès que j'ai le temps j'intègre ton code dans mon codepen et je reviens vers vous.
Bonjour gcyrillus,

Encore merci pour le suivi.

Ton dernier fork me semble très prometteur.

Je dois tester à ma sauce, pas trop le temps ni même ce week-end, je reviens vers vous au plus vite la semaine prochaine.
Prévenir un modérateur
Répondre au sujet
Aller à