[Résolu] Diviser l'écran en 3 divs plein écran

Bonjour,

je fais un site pour un photographe et je voudrais que sur la page d'accueil l'écran soit partagé en 3 photos plein écran sur lesquelles on pourrait cliquer pour accéder à une gallerie. Je suis donc en train de construire l'architecture des div avant d'y placer des photos. Voici mon code:

<div class="div-gallerie">
</div>
<div class="div-gallerie">
</div>
<div class="div-gallerie">
</div> 

.div-gallerie {
	background-color: red;
	height: 100vh;
	width: 33%;
	min-width: 50px;
	display: inline-block;
	margin: 0;
}

Le problème c'est que si je réduit la largeur de la page, la troisième div va à la ligne avant même d'avoir atteint son min-width, quant aux deux autres elles restent cote à cotes. Je ne comprends pas, à la limite si elles allaient les 3 les unes en dessous des autres, mais là juste la troisième, c'est bizarre
Mon objectif est bien sur qu'aucune n'aille à la ligne.

j'espère que vous pourrez m'éclairer !
Modifié par Isaabelle (15 Mar 2020 - 11:25)

Hello,
Réponse d'un gars dans un bus qui vient de casser sa voiture:
Et si tu met un div conteneur dans lequel tu applique un inline ?

Bonjour/bonsoir

Si l'idée est de faire 3 images cliquable, autant partir sur 3 liens avec une image dedans.

display:flex; permettra de ne pas avoir a se soucier de largeur et retour à la ligne.

object-fit peut aussi permettre de gérer l'affichage des images sans les déformées .

Base HTML possible:

<nav>
  <a href title="portraits"><img src="https://placeimg.com/480/640/people"></a>
  <a href title="Noir et blanc"><img src="https://placeimg.com/640/640/arch/grayscale"></a>
  <a href title="Paysage"><img src="https://placeimg.com/640/480/nature"></a>
</nav>

Avec pour CSS sur une base en flex :

body {
  margin: 0;
}
nav {
  height: 100vh;
  display: flex;
}
nav a {
  flex: 1;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top center;
}

Démo copiable et modifiable : https://codepen.io/gc-nomade/pen/VwLxKaK

Quelques infos complémentaires:
https://developer.mozilla.org/fr/docs/Web/CSS/object-fit

https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

Sinon , si tu tiens a ton inline-block, ceci t'aideras à comprendre ce qu'il se passe : https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Cdt
Modifié par gcyrillus (15 Mar 2020 - 20:43)

stryk a écrit :
Hello,
Réponse d'un gars dans un bus qui vient de casser sa voiture:
Et si tu met un div conteneur dans lequel tu applique un inline ?

La poisse désolé ! Merci d'autant plus de prendre la peine de m'aider
Bonne idée une div conteneur je vais essayer

gcyrillus a écrit :

Si l'idée est de faire 3 images cliquable, autant partir sur 3 liens avec une image dedans.

le truc c'est que je veux que les images soient toujours centrées et débordent horizontalement et/ou verticalement quand on réduit l'image. Je sais faire ça avec une background-img c'est pour ça que je met des div.

gcyrillus a écrit :

display:flex; permettra de ne pas avoir a se soucier de largeur et retour à la ligne.

je ne connais pas bien les propriétés de flex mais je vais me pencher dessus, c'est peut être la solution, merci!
Modifié par Isaabelle (15 Mar 2020 - 22:34)

Isaabelle a écrit :

le truc c'est que je veux que les images soient toujours centrées et débordent horizontalement et/ou verticalement quand on réduit l'image. Je sais faire ça avec une background-img c'est pour ça que je met des div.

img + object-fit + object-position et background + background-size + background-position ont a peu prés le même rendu et comportement à l'écran (mais pas de repeat) . , les 3 images du codepen débordent et se redimensionnent de la même manière que si elles étaient placées en background.


Il est conseiller de garder une photo/illustration dans le HTML (avec un attribut alt) où leur place est légitime alors qu'un élément graphique a plutôt sa place en background, il te suffit de redimensionner la fenêtre ou de retirer les styles pour voir les images entièrement dans leurs dimensions.

Après chacun fait comme il veut, tu peut jouer avec le codepen justement pour te familiariser avec object-fit /object-position qui, pour info, fonctionnent aussi pour la balise <video> .

Cdt
Modifié par gcyrillus (15 Mar 2020 - 23:34)

gcyrillus a écrit :


img + object-fit + object-position et background + background-size + background-position ont a peu prés le même rendu et comportement à l'écran (mais pas de repeat) . , les 3 images du codepen débordent et se redimensionnent de la même manière que si elles étaient placées en background.

Merci, j'ai pris le temps de voir ce dont tu parles et ça me semble en effet bien judicieux! Maintenant je vais essayer de le mettre en œuvre et je reviens ici dire si j'y suis parvenue.

gcyrillus a écrit :

Avec pour CSS sur une base en flex :

body {
  margin: 0;
}
nav {
  height: 100vh;
  display: flex;
}
nav a {
  flex: 1;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top center;
}

Alors je vois un problème dans le code :
-si mes images on un height et width de 100% mon écran n'est pas divisé en trois mais les img sont les unes sous les autres. J'ai arrangé ça en mettant un width de 33%

Mais après y a le même problème qu'avant : en redimmenssionant la troisième img passe en dessous (mais pas la deuxième )




Saurais-tu me dire pourquoi?
Voilà mon code :

<nav>
  <a href title="Storytelling"><img src="http://localhost:8888/danielmichelon/wp-content/uploads/2020/02/storytelling.jpg"></a>
  <a href title="Cirque"><img src="http://localhost:8888/danielmichelon/wp-content/uploads/slider3/cirque.jpeg"></a>
  <a href title="Portfolio"><img src="http://localhost:8888/danielmichelon/wp-content/uploads/2020/02/portfolio-1.jpg"></a>
</nav>

nav {
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
}
nav a {
  flex: 1;
}
nav img {
  height: 100%;
  width: 33%;
  object-fit: cover;
  object-position: top center;
}

Modifié par Isaabelle (16 Mar 2020 - 10:55)

Hello,
Cela semble fonctionner… J'ai changé ton width sur tes img qui ne font pas 33% de leurs parents (<a>) mais c'est bien les <a> qui fait 1/3 de la page (grâce au flex-grow: 1 et au parent qui est en display flex)

Pour rappel, flex: 1 veut dire en fait (selon les navigateurs) :
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

Bonjour,
Si les 3 images doivent passer l'une sous l autre quand on reduit la taille (mode 'mobile') il vaudrait mieux faire ' flex-wrap : wrap; '

alain_47 a écrit :
Bonjour,
Si les 3 images doivent passer l'une sous l autre quand on reduit la taille (mode 'mobile') il vaudrait mieux faire ' flex-wrap : wrap; '

je ferai un code spécifique plus tard pour les mobile, de toute façon j'avais mis nowrap pour voir si ça changeait quelque chose mais ça ne change rien donc je compte l'enlever

Yordi a écrit :
Hello,
Cela semble fonctionner… J'ai changé ton width sur tes img qui ne font pas 33% de leurs parents (&lt;a&gt;) mais c'est bien les &lt;a&gt; qui fait 1/3 de la page (grâce au flex-grow: 1 et au parent qui est en display flex)

Pour rappel, flex: 1 veut dire en fait (selon les navigateurs) :
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

oui mais pourtant ça marche pas
ça fait ça quand je met le code comme tu le dis ou comme gcyrillus dit :



je remets le code :

nav {
  height: 100vh;
  display: flex;
}
nav a {
  flex: 1 1 0;
}
nav img {
  height: 100%;
  width: 100%%;
  object-fit: cover;
  object-position: top center;
}

le code de Yordi fonctionne tres bien, me semble t il

va sur son codepen, et modifie son CSS en 'wrap' au lieu de 'nowrap' (et remets le ensuite !)

et tu verras si c est ce que tu voulais (3 images en largeur sur desktop et 3 images en hauteur sur mobile).

nb :aie j ai raté ton precedent post !
Modifié par alain_47 (16 Mar 2020 - 11:42)

en regardant dans la console je vois qu'il me barre mon width de 100%:


la clé est peut être la... Mais je sais pas pourquoi

alain_47 a écrit :
le code de Yordi fonctionne tres bien, me semble t il

je n'en doute pas mais pourtant ça marche pas.. j'ai peut etre une erreur ailleurs..

Ca y est je crois que c'est résolu:
il ya dans mon css ou dans celui de mon thème parent un dispay block qui bloque le flex :

Tu pourrais rajouter un 'justify-content : center' dans le nav{ ..}

Ca donne quoi ?

Alleluia ça y est ça marche !!! Merci à tous !

alain_47 a écrit :

et tu verras si c est ce que tu voulais (3 images en largeur sur desktop et 3 images en hauteur sur mobile).

j'abuse peut être un peu, je pourrais chercher comment faire toute seule mais du coup comment on fait pour que les 3 images se mettent en vertical sur mobile?

Modifié par Isaabelle (16 Mar 2020 - 11:57)

Ce qui est etonnant c est que le nav est defini en 'block' à la ligne 78 de ton CSS puis en 'flex' à la ligne 181. et en principe, c est le dernier defini qui prone sur le premier donc ton "nav" devrait etre en 'flex' or ce n est pas le cas. c est un peu bizarre ! (car a priori il n y a pas de 'important !') .
J espere que tu as trouvé ce que tu voulais.
Bye.

*********

NB : pour repondre à ton dernier post : en flex ca marche tres bien. je crois que tu peux regarder les tutos sur le site, il doit y avoir un tuto sur flex.
Mais le pble dans ton cas, c est que ton nav ne passe pas en flex ! et je ne sais pas pourquoi.

NB 2 : commem deja dit, le codepen de YORDI fonctionne bien si tu mets flex-wrap à wrap , essaies sur son codepen.
Modifié par alain_47 (16 Mar 2020 - 12:03)