Cacher une partie de l'image en css

**cobra48** · 03/10/2016, 18h02

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

Invité · 03/10/2016, 18h19

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 */
....
}

**cobra48** · 03/10/2016, 18h45

Bonjour
merci pour cette réponse effectivement ça fonctionne, par contre l'image se redimensionne également en hauteur et la hauteur doit être fixe...

Invité · 03/10/2016, 20h35

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

**cobra48** · 04/10/2016, 16h33

@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

Invité · 04/10/2016, 18h49

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

**cobra48** · 05/10/2016, 10h15

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é

Invité · 05/10/2016, 11h59

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**cobra48** · 05/10/2016, 12h36

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 ?

Invité · 05/10/2016, 12h43

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

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

Cacher une partie de l'image en css

CSS

Discussions similaires

Partager

Partager