Aide mise en page portfolio

Par cochi69, il y a 9 ans

Les bases HTML/CSS

Bonjour,

j'essaie de créer un portfolio avec une mise en page bien particulière.
Le portfolio doit prendre (et s'adapter) toute la taille de l'écran, je ne veux pas de marge autour (donc width:100%). J'aimerai que toutes les photos soient collées les unes aux autres sans espaces (il n'y aura pas de textes). J'aimerais également que les photos s'adaptent a leur container sans deformation (que les cotés soit cachés lorsque la taille diminue).
En gros j'imagine un gros bloc avec toutes les photos, 4 par lignes, toutes de même hauteur (fixé donc pas en pourcentage) et que lorsque l'on diminue la taille de la fenêtre, les coté des photos disparaissent (vu que la width de chaque bloc aura diminué).
Je sais pas si c'est très clair, si vous ne comprenez pas dites moi et j'essaierai de faire un schéma.

J'ai compris que j'allais devoir utiliser des flexbox, cependant je n'arrive pas à saisir comment leur attribuer une taille et je ne comprends pas complètement comment tout ça fonctionne. Quelqu'un pourrait il m'expliquer ? Je n'arrive pas à trouver des tutos répondant à ma question sur google.
Avez vous d'autres idées/conseils de comment est ce que je dois m'y prendre pour arriver à cela ?

Bien évidement je ne demande pas de solutions toutes faites, le but premier est d'apprendre mais si vous avez des pistes ou des astuces svp :)
Ce projet me tient vraiment à coeur

Merci d'avance

8 réponses

cochi69, il y a 9 ans

Merci pour vos réponses, mais le but serait d'apprendre à coder ça complètement "à la main", vous ne pensez pas que ce soit possible ?

Mag Ouille, il y a 9 ans

Avec flexbox tu peut leur indiquer une taille avec width: ?%
Ou plus spécifiquement avec "flex: 1" ce qui représente un ordre de grandeur.

Si un autre tu lui indique flex: 2 , il va prendre 2x plus que l'autre.

Lartak, il y a 9 ans

Bonsoir.
Si tu ne l'as pas encore fait, tu pourrais commencer par regarder Tutoriel Vidéo HTML-CSS » Flexbox, ce qui pourrait te permettre d'y voir plus clair concernant le Flexbox et peut-être même d'y trouver la solution, sans avoir à utiliser du Javascript.

Benjamin Derepas, il y a 9 ans

Alors si tu veux tout faire à la main , flexbox + object-fit + media queries

cochi69, il y a 9 ans

Hello

Merci pour vos réponses, en fait je vais vous expliquer où j'en suis car j'ai pas mal avancé.

J'ai réussi à faire : le portfolio qui prend toute la largeur de la page, avoir 4 images par lignes (toutes de mêmes dimensions, lorsque la fenêtre est redimensionné la hauteur reste fixe et la largeur change (parfait !)

Par contre je rencontre un problème pour le redimensionnement d'image. Actuellement étant donné que la hauteur ne bouge mais que la largeur oui, l'image s'adapte à ça et elle est déformée. Je souhaiterai que l'image soit "recadré", c'est à dire que le centre de l'image reste le même mais que lorsque la largeur diminue, les côtés gauche et droit de l'image se "cachent"

Et pour ça, je n'y arrive vraiment pas...

<div id="portfolio-contenu"> <div class="projet print"> <a href="page.html" class="lien-projet"> <img src="img/image.jpg" alt="" class=""> </a> <div class="nom-projet">nom <p>sous titre</p></div> </div> <div class="projet print"> <a href="page.html" class="lien-projet"> <img src="img/image.jpg" alt="" class=""> </a> <div class="nom-projet">nom <p>sous titre</p></div> </div> <div class="projet print"> <a href="page.html" class="lien-projet"> <img src="img/image.jpg" alt="" class=""> </a> <div class="nom-projet">nom <p>sous titre</p></div> </div> <div class="projet print"> <a href="page.html" class="lien-projet"> <img src="img/image.jpg" alt="" class=""> </a> <div class="nom-projet">nom <p>sous titre</p></div> </div> <div class="projet print"> <a href="page.html" class="lien-projet"> <img src="img/image.jpg" alt="" class=""> </a> <div class="nom-projet">nom <p>sous titre</p></div> </div> </div> #portfolio-contenu{ margin-top: 25px; text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -webkit-justify-content: center; -webkit-align-items: stretch; -moz-flex-wrap: wrap; -moz-justify-content: center; -moz-align-items: stretch; -ms-flex-wrap: wrap; -ms-justify-content: center; -ms-align-items: stretch; flex-wrap: wrap; justify-content: center; align-items: stretch; text-align: center; } .projet{ overflow: hidden; position: relative; height: 10%; max-height: 300px; width: 25%; display: inline-block;} .projet img{ width: 100%; height: 300px; -webkit-transition: -webkit-transform 300ms; transition: transform 300ms; -webkit-filter: blur(0.2px) grayscale(100%) ; filter: blur(0.2px) grayscale(100%); background-position: center; background-size: cover; } .projet:hover img { -webkit-transition: 300ms; transition: 300ms; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-filter: blur(0px) grayscale(0%) ; filter: blur(0px) grayscale(0%); } .projet:hover .nom-projet{ transform: translateY(0); -webkit-transform: translateY(0); transition: linear 350ms; -webkit-transition: linear 350ms; } .nom-projet { transition: linear 350ms; -webkit-transition: linear 350ms; -moz-transition: linear 350ms; position: absolute; left: 0; right: 0; bottom:0; transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%); padding: 15px 10px; color: #fff; background: #726222; font-size: 20px; font-family: 'caviar_dreamsbold'; text-align: center; } .nom-projet p{ color: #fff; font-size: 15px; font-family: 'caviar_dreamsbold'; text-align: center; }

Avez-vous une idée ?

Benjamin Derepas, il y a 9 ans

Comme je te l'ai dit dans le message précedent, object-fitet object-position.
Regarde la doc sur google