IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Cacher une partie de l'image en css


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Femme Profil pro
    Intégrateur Web
    Inscrit en
    Octobre 2016
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 29
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Octobre 2016
    Messages : 5
    Par défaut Cacher une partie de l'image en css
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <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 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    #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;
    }
    Savez vous si c'est possible de faire ce que je veux ? Si oui, savez vous comment ?

    Merci par avance

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .projet img{
        width: 100%;
        /*height: 300px;*/ /* à SUPPRIMER */
        display:block; /* à ajouter */
    ....
    }

  3. #3
    Membre à l'essai
    Femme Profil pro
    Intégrateur Web
    Inscrit en
    Octobre 2016
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 29
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Octobre 2016
    Messages : 5
    Par défaut
    Bonjour
    merci pour cette réponse effectivement ça fonctionne, par contre l'image se redimensionne également en hauteur et la hauteur doit être fixe...

  4. #4
    Invité
    Invité(e)
    Par défaut
    J'ai fait un code dans le même esprit il y a un certain temps :



    Mais il nécessite JavaScript (jQuery).

  5. #5
    Membre à l'essai
    Femme Profil pro
    Intégrateur Web
    Inscrit en
    Octobre 2016
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 29
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Octobre 2016
    Messages : 5
    Par défaut
    @jreaux62 merci avec ça je devrais m'en sortir, par contre dans le code JS, il y a quelque chose que je ne comprends pas :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function equalheight_newsbox(id) {
    	var H = 0;
    	$(id).height( 'auto' );
    	$(id).each( function() {
    		H = Math.max( Math.ceil($(this).find('figure').height() + $(this).find('header').height()), H );
    	});
    	$(id).height( H+'px' );
    	$(id).find(id+'-desc').css({'top':H+'px'});
    };
    Dans cette fonction, je ne comprends pas comment ça fonctionne ni ce que le $(this).find('header').height() signifie car même si il n'y a pas de header pour la description, ça fonctionne mais par contre si on supprime cette partie ça ne fonctionne plus

  6. #6
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1/ dans mon code, la hauteur des "boites" (conteneurs) est calculée automatiquement en fonction des hauteurs des images
    d'où le : H = Math.max(......).

    2/ $(this).find('header').height() :
    car mes "boites" (conteneurs) ont pour hauteur = (image + texte en dessous) = (<figure> + <header>)
    Ce qui n'est pas ton cas.

    Dans ton cas, il va falloir "élaguer" pas mal mon code !

    SI tu imposes la hauteur des "boites" (300px, à mettre sur le conteneur, et pas sur l'image), le script devrait en être simplifié.

Discussions similaires

  1. Réponses: 3
    Dernier message: 31/10/2006, 12h20
  2. Afficher/cacher une partie
    Par ark42 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 27/07/2006, 13h18
  3. copier une partie de l'image
    Par zidenne dans le forum Langage
    Réponses: 6
    Dernier message: 03/02/2006, 12h40
  4. Afficher/Cacher une partie d'une page
    Par frechy dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 12/01/2006, 14h18
  5. Afficher / Cacher une partie d'un formulaire
    Par damjal dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 17/10/2005, 18h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo