Redimensionner une image avec les media queries

**PhilHoo** · 28/12/2021, 11h44

Bonjour,

voilà j'ai commencé un petit bout de code , j'ai une div "header" qui contient une image.

j'ai créé un media query pour changer le rendu sur un téléphone, donc je veux que mon image qui se trouve dans mon "header" se redimensionne en gardant les proportions.

voici mon

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CB ROYALE FRATERNITE</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/style-telephone.css" />
  </head>
  <body style="background-image:url(images/parquet.png)">
    <div class="bloc-page"> <!-- bloc-page (debut)-->
     <div class="top-header"> <!-- top-header (debut)-->
     </div> <!-- top-header (fin)-->
     <div class="header"> <!-- header (debut) -->
 
	   <img class="image-logo" src="images/banniere-site.png" />
 
 
     </div> <!-- header (fin) -->
     <div class="menu"> <!-- menu (debut) -->
     <nav>
                    <ul>
                        <li><a href="#">ACTUALITES</a></li>
                        <li><a href="#">LE CLUB</a></li>
                        <li><a href="#">EQUIPES</a></li>
                        <li><a href="#">COMPETITION</a></li>
                        <li><a href="#">CONTACTS</a></li>
                    </ul>
                </nav>
     </div> <!-- menu (fin) -->
    </div> <!-- bloc page (fin) -->
  </body>
</html>

et le code CSS

style pour desktop

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
.bloc-page
{
 
 
    width: 1200px;
    height: 800px;
    margin: auto;
 
 
    background-color: #ffffff;
}
 
.top-header
{
 position:relative;
	width:1200px;
	height:30px;
    background-color:#03224C;
    margin-left: auto;
    margin-right: auto;
}
 
.header
{
	position:relative;
	width:1200px;
	height:150px;
    background-color:#ffffff;
    margin-left: auto;
    margin-right: auto;
}
 
 
.menu
{
	position:relative;
	width:1200px;
	height:50px;
    background-color:#03224C;
    margin-left: auto;
    margin-right: auto;
}
 
/* Navigation */
 
nav ul
{
    list-style-type: none;
    display: flex;
}
 
nav li
{
    margin-right: 15px;
}
 
nav a
{
    font-size: 1.3em;
    color: #ffffff;
    padding-bottom: 3px;
    text-decoration: none;
}
 
nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}

et pour téléphone

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
.bloc-page
{
    width: auto;
    height: 800px;
    background-color: #ffffff;
}
 
.top-header
{
 position:relative;
	width: auto;
	height:30px;
    background-color:#03224C;
    margin-left: auto;
    margin-right: auto;
}
 
.header
{
	position:relative;
	width: auto;
	height:80px;
    background-color:#ffffff;
    margin-left: auto;
    margin-right: auto;
}
 
 
.image-logo
{
 
 width:100%;
 height:100%;
 
}
 
.menu
{
	position:relative;
	width:auto;
	height:auto;
    background-color:#03224C;
    margin-left: auto;
    margin-right: auto;
}
 
/* Navigation */
nav
    {
        width: auto;
        text-align: center;
    }
 
    nav ul
    {
        flex-direction: column;
    }
 
    nav li
    {
        padding-left: 4px;
    }
 
    nav a
    {
        font-size: 1.1em;
    }
 
    nav a:hover
    {
        border-bottom: 0;
    }

donc dans le code ces pour la version téléphone

j'ai mis ceci pour redimensionner l'image

Code :

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

1
2
3
4
5
6
7
.image-logo
{
 
 width:100%;
 height:100%;
 
}

ca redimensionne mais je ne garde pas les proportions, l'image est déformée

voilà je vais pas si c'est possible de faire cela.

merci pour votre aide

**NoSmoking** · 28/12/2021, 17h18

Bonjour,

ca redimensionne mais je ne garde pas les proportions, l'image est déformée

tu te compliques la tâche inutilement !

Pour commencer :

Code :

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

1
2
3
.image-logo {
  max-width: 100%;
}

la hauteur suivra.

Ensuite...
supprime toutes tes width: 1200px et remplace les par max-width: 1200px, fait pareil avec tes height.

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
.bloc-page {
  max-width: 1200px;  /*-- --*/
  min-height: 800px;  /*-- --*/
  margin: auto;
  background-color: #FFF;
}
.top-header {
  position: relative;
  max-width: 1200px;  /*-- --*/
  height: 30px;
  margin-right: auto;
  margin-left: auto;
  background-color: #03224C;
}
.header {
  position: relative;
  max-width: 1200px;  /*-- --*/
  max-height: 150px;  /*-- --*/
  margin-right: auto;
  margin-left: auto;
  background-color: #FFF;
}

sans media-queries cela devrait déjà ressembler à quelque chose de propre.

Redimensionner une image avec les media queries

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager