28105 sujets

CSS et mise en forme, CSS3

Bonjour

j'essaie actuellement de créer un site portfolio et il y a quelques petites choses que je n'arrive pas à faire.
Voilàa ce que je souhaiterai :
Tout d'abord la page portfolio sera composé d'un bloc d'images de même taille. Lors d'un hover sur l'image, le titre du projet apparait. Lors d'un clic, l'utilisateur est dirigé vers la page du projet en question avec description etc. Voici les spécificités que je souhaite
- un portfolio qui prenne toute la largeur de la page
- tout les bloc d'image font la même taille
- je souhaite 4 images par lignes
- lors du redimensionnement de la fenêtre, seule la largeur des bloc changerait, la hauteur doit resté la même
- étant donné que la largeur de l'image change en fonction de la taille de la fenêtre, j'aimerai que les images ne soient pas redimensionné, mais "tronquer" sur les cotés, en fait, que le redimensionnement se fasse par rapport au centre et cache seulement les cotés gauches et droit.

Actuellement, voici mon code HTML

          <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>


et le css associé :

#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;
}



Donc actuellement, il y a bien 4 images par ligne, le hover et le clic fonctionnent bien. Lors du redimensionnement de la fenêtre, la hauteur reste fixe et la largeur change. Jusque là tout va bien.
Par contre les images sont redimensionné donc les proportions ne sont pas respectées.

Savez vous comment faut il faire ?

Ce projet me tient vraiment à coeur Smiley smile

Merci par avance Smiley smile
Bonsoir,

conra59 a écrit :
- lors du redimensionnement de la fenêtre, seule la largeur des bloc changerait, la hauteur doit resté la même
- étant donné que la largeur de l'image change en fonction de la taille de la fenêtre, j'aimerai que les images ne soient pas redimensionné, mais "tronquer" sur les cotés, en fait, que le redimensionnement se fasse par rapport au centre et cache seulement les cotés gauches et droit.


Pour les images et le ratio il y aurait beaucoup à dire, mais inspirez-vous de ce code, nous verrons après.

Une piste clef pour l'image : la placer via css en background-image, puis appliquer un background-size:cover.

Pour la hauteur je vois deux solutions :
- Soit appliquer un ratio (voir ici), c'est la technique employée dans le premier exemple que j'ai donné à voir, le ratio est obtenu avec une association de height:0 et padding-bottom:100% par exemple (pour un carré),
- Soit appliquer une hauteur selon le viewport (à éviter à mon avis), avec l'emploi des unités vh.
Bonsoir
merci pour ta réponse, je regarde le lien et je reviens vers toi.
Effectivement je n'avais pas pensé à mettre l'image en background

Olivier C a écrit :

Pour la hauteur je vois deux solutions :
- Soit appliquer un ratio (voir ici), c'est la technique employée dans le premier exemple que j'ai donné à voir, le ratio est obtenu avec une association de height:0 et padding-bottom:100% par exemple (pour un carré),
- Soit appliquer une hauteur selon le viewport (à éviter à mon avis), avec l'emploi des unités vh.


En fait la hauteur est fixé peu importe la taille de l'écran et j'ai réussi à mettre ça en place, mais c'est au niveau de la largeur que j'ai un problème. L'image doit être "tronqué" en largeur