Cacher une partie de l'image en css

Version imprimable

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

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

Bonjour,

Code:

1
2
3
4
5
6
.projet img{
    width: 100%;
    /*height: 300px;*/ /* à SUPPRIMER */
    display:block; /* à ajouter */
....
}

03/10/2016, 18h45
cobra48

Bonjour
merci pour cette réponse effectivement ça fonctionne, par contre l'image se redimensionne également en hauteur et la hauteur doit être fixe...
03/10/2016, 20h35
Invité
J'ai fait un code dans le même esprit il y a un certain temps :
- http://codepen.io/jreaux62/pen/gpMavx
Mais il nécessite JavaScript (jQuery).

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

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

04/10/2016, 18h49
Invité

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é.
05/10/2016, 10h15
cobra48

Je crois que je suis perdu là...
Si je fixe la hauteur des boites et pas de l'image, lorsque je rétrécie la fenêtre, l'image est plus petite que la boite.
Il faut que je fasse un script pour fixer la hauteur de l'image en m'inspirant du tiens c'est ça ?

Là je suis largué

1/ La fonction qui permet de centrer l'image dans sont conteneur est : centerheight_img_newsbox(id)

2/ Voici un code modifié, pour que les titres s'affichent SUR l'image (et plus en dessous) : http://codepen.io/jreaux62/pen/YGYWzg

Les différences avec le code précédent :
Code:

1 2 3 4 5 6 .newsbox header { position:absolute; width:100%; background:rgba(0,0,0,0.5); bottom:0; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function equalheight_newsbox(id) { var H = 0; var H_txt = 0; $(id).height( 'auto' ); $(id).each( function() { H = Math.max( Math.ceil( $(this).find('figure').height() ), H ); // image H_txt = Math.max( Math.ceil( $(this).find('header').height() ), H_txt ); // titre }); $(id).height( H+'px' ); $(id).find('header').height( H_txt+'px' ); $(id).find(id+'-desc').css({'top':H+'px'}); };
la fonction centerheight_img_newsbox() est inchangée.

N.B. Tu auras remarqué que j'impose déjà la hauteur des conteneurs des images (<figure>) en fonction de la largeur d'écran (media queries)

3/ Dans ton cas :
La fonction equalheight_newsbox(id) n'est pas utile.

dans le CSS, tu peux enlever les codes "responsive", à remplacer par :
Code:

1 2 .newsbox { width:20%; } .newsbox figure { height:300px; }
4/ AUTRE SOLUTION, plus simple (= sans JS) :

mettre les images en background du conteneur (avec background-size:cover;)
mettre une image transparente dans les balises <img>

05/10/2016, 12h36
cobra48

Hello,
ok merci je vais regarder tout ça de plus près.
J'avais pensé à la 4ème solution, mais comme ça je crois que mes images ne seront pas référencées si ?
05/10/2016, 12h43
Invité

Cette version correspond à ton besoin : http://codepen.io/jreaux62/pen/wzpWxJ

A adapter pour les textes, en fonction de tes animations...