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 :
Savez vous si c'est possible de faire ce que je veux ? Si oui, savez vous comment ?
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; }
Merci par avance
Partager