Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2490 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Cacher une partie de l'image

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Cacher une partie de l'image

n°2289324
cobra481
Posté le 03-10-2016 à 18:05:59  profilanswer
 

Bonjour
 
je suis actuellement de créer un site portfolio et j'ai un petit problème. Je souhaite que sur la page, il y ai des lignes de 4 images qui prennent 100% de l'écran (25%par image donc), ensuite je souhaiterai que lorsque la fenêtre est redimensionnée, l'image s'adapte au cadre, j'entends par là que le centre de l'image reste le même, que l'image ne bouge pas, juste le cadre de l'image donc en gros les côtés gauches et droits disparaissent ; un peu comme un background-size: cover en fait.
Le problème est que je ne peux pas mettre les images en bg car ce sont les principaux éléments de ma page.
Avec mon code actuel, l'image est redimensionné donc le rapport hauteur/largeur n'est pas respecté.
 
Voici mon code html :
 

Code :
  1. <div id="portfolio-contenu">
  2.            <div class="projet print">
  3.                <a href="page.html" class="lien-projet">
  4.                    <img src="img/image.jpg" alt="" class="">
  5.                </a>
  6.                <div class="nom-projet">nom <p>sous titre</p></div>
  7.            </div>
  8. <div class="projet print">
  9.                <a href="page.html" class="lien-projet">
  10.                    <img src="img/image.jpg" alt="" class="">
  11.                </a>
  12.                <div class="nom-projet">nom <p>sous titre</p></div>
  13.            </div>
  14. <div class="projet print">
  15.                <a href="page.html" class="lien-projet">
  16.                    <img src="img/image.jpg" alt="" class="">
  17.                </a>
  18.                <div class="nom-projet">nom <p>sous titre</p></div>
  19.            </div>
  20. <div class="projet print">
  21.                <a href="page.html" class="lien-projet">
  22.                    <img src="img/image.jpg" alt="" class="">
  23.                </a>
  24.                <div class="nom-projet">nom <p>sous titre</p></div>
  25.            </div>
  26. <div class="projet print">
  27.                <a href="page.html" class="lien-projet">
  28.                    <img src="img/image.jpg" alt="" class="">
  29.                </a>
  30.                <div class="nom-projet">nom <p>sous titre</p></div>
  31.            </div>
  32.            
  34.            </div>


 
et le css :
 

Code :
  1. #portfolio-contenu{
  2.     margin-top: 25px;
  3.     text-align: center;
  4.     display: -webkit-box;
  5.     display: -moz-box;
  6.     display: -ms-flexbox;
  7.     display: -webkit-flex;
  8.     display: flex;
  9.     -webkit-flex-wrap: wrap;
  10.     -webkit-justify-content: center;
  11.     -webkit-align-items: stretch;
  12.     -moz-flex-wrap: wrap;
  13.     -moz-justify-content: center;
  14.     -moz-align-items: stretch;
  15.     -ms-flex-wrap: wrap;
  16.     -ms-justify-content: center;
  17.     -ms-align-items: stretch;
  18.     flex-wrap: wrap;
  19.     justify-content: center;
  20.     align-items: stretch;
  21.     text-align: center;
  22. }
  24. .projet{
  25.     overflow: hidden;
  26.     position: relative;
  27.     height: 10%;
  28.     max-height: 300px;
  29.     width: 25%;
  30.     display: inline-block;}
  31. .projet img{
  32.     width: 100%;
  33.     height: 300px;
  34.     -webkit-transition: -webkit-transform 300ms;
  35.     transition: transform 300ms;
  36.     -webkit-filter: blur(0.2px) grayscale(100%) ;
  37.   filter: blur(0.2px) grayscale(100%);
  38.     background-position: center;
  39.     background-size: cover;
  40. }
  42. .projet:hover img {
  43.     -webkit-transition: 300ms;
  44.     transition: 300ms;
  45.     -webkit-transform: scale(1.05);
  46.     -moz-transform: scale(1.05);
  47.         -webkit-filter: blur(0px) grayscale(0%) ;
  48.       filter: blur(0px) grayscale(0%);
  49. }
  51. .projet:hover .nom-projet{
  52.     transform: translateY(0);
  53.     -webkit-transform: translateY(0);
  54.     transition: linear 350ms;
  55.     -webkit-transition: linear 350ms;
  56. }
  58. .nom-projet {
  59.     transition: linear 350ms;
  60.     -webkit-transition: linear 350ms;
  61.     -moz-transition: linear 350ms;
  62.     position: absolute;
  63.     left: 0;
  64.     right: 0;
  65.     bottom:0;
  66.     transform: translateY(100%);
  67.     -moz-transform: translateY(100%);
  68.     -webkit-transform: translateY(100%);
  69.     padding: 15px 10px;
  70.     color: #fff;
  71.     background: #726222;
  72.     font-size: 20px;
  73.     font-family: 'caviar_dreamsbold';
  74.     text-align: center;
  75. }
  77. .nom-projet p{
  78.     color: #fff;
  79.     font-size: 15px;
  80.     font-family: 'caviar_dreamsbold';
  81.     text-align: center;
  82. }


 
Savez vous si c'est possible de faire ce que je veux ? Si oui, savez vous comment ?
 
Merci par avance

mood
Publicité
Posté le 03-10-2016 à 18:05:59  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Cacher une partie de l'image

 

Sujets relatifs
[HTML] Open Graph : Facebook ne voit pas mon og:imageIntégrer une partie d'une autre page web dans une page html/php
Fonction JS pour récupérer le tag image "Alt" sur un diaporama[VBA] Cacher bouton excel utilisateurs AD
COMMENT CENTRER Background-image dans FFVba word en-tête image + texte
quand mouseover texte faire apparaitre une image en arrière planInsertion image userform
création colonne pour chemin imageRécupérer une partie du nom de fichier en variable ?
Plus de sujets relatifs à : Cacher une partie de l'image

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.058 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR