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
Salut,
Le mieux pour faire ça à mon sens c'est de le créer avec Masonry (js).
Typiquement un exemple : http://tera.themanoid.com/portfolio-no-spacing.html sur themeforest tu peux trouver plein de thème utilisant ce plugin.
Tu peux essayer Mansory ou Isotop, ou Salvattore ou bien encore je t'invite à regarder ce super article de Vincent Deolivera qui à créer son propre plugin, Greeed .
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 ?
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.
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.
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 ?
Comme je te l'ai dit dans le message précedent, object-fitet object-position.
Regarde la doc sur google