Ajuster une image à son conteneur

**Darkoos0410** · 30/03/2021, 20h26

Bonjour,

Ça fait 2 heure que je cherche comment mettre une image dans un cadre blanc. Enfaite j'arrive bien a la faire bouger de place mais pas à la réduire pour qu'elle rentre dans le fond blanc.
Voici le code que j'ai saisie:

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
<html>  
<head>
<title>Accueil</title>
<link rel="stylesheet" href="css/style.css" />
</head>
	<body>
	<form class="box" action="" method="post" name="login">
	<h1 class="box-logo box-title"> 
	<img src="logo_preventair.png">
	</h1>
	<h1 class="box-title">Connexion</h1>
		<form action="login.php" method="post">
			<input type="text" class="box-input" placeholder="Nom d'utilisateur" name="login" value=""><br />
			<input type="password" class="box-input" placeholder="Mot de passe" name="pwd" value=""><br />
			<input type="submit" class="box-button" name="connexion" value="Connexion"><br />
			<p class="box-register">Vous êtes nouveau ici? 
			<a href="inscription.php">S'inscrire</a>
			</p>
		</form>
	</body>
</html>

Nom : projet.png
Affichages : 369
Taille : 193,4 Ko

Merci beaucoup pour ceux qui vont m'aider.

Baptiste

**NoSmoking** · 01/04/2021, 08h14

Bonjour,
hormis le fait que ton code HTML est non conforme as-tu essayé un simple

Code css :

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

1
2
3
img {
  max-width: 100%;
}

**javatwister** · 01/04/2021, 11h20

Bonjour,

Pour préciser la remarque de NoSmoking:

- Tu cherches à établir une mise en page mais tu ne nous montres pas la css... c'est dommage.
- Tu ouvres 2 formulaires l'un dans l'autre.
- Tu n'en fermes qu'un.
- Tu inclus une image dans une balise de titre.
- Tu places 2 balises h1 l'une après l'autre.

Insère ton logo dans un conteneur approprié (un simple div avec une largeur définie) et, effectivement, max-width fera le job.

**Darkoos0410** · 03/04/2021, 22h39

Envoyé par NoSmoking

hormis le fait que ton code HTML est non conforme as-tu essayé un simple

Code css :

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

1
2
3
img {
  max-width: 100%;
}

Oui je sais mon code marche pas,j'ai remplacer le premier <from> par un <div> et ça marche bien.

Et sinon ton code tu le met sur le css

**NoSmoking** · 07/04/2021, 09h50

Et sinon ton code tu le met sur le css

dans la partie CSS de ton document, exemple avec une image 1709 x 709 px:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Accueil</title>
<style>
.box {
  width: 30em;
  margin: auto;
  border: 1px solid #069;
  text-align: center;
}
.box img {
  max-width: 100%;
}
</style>
</head>
<body>
  <form class="box" action="login.php" method="post" name="login">
    <img src="https://club.developpez.com/webdesign/Developpez.com/Logos/logo-dvp-v09_transparent.png " alt="logo-dvp-v09_transparent.png">
    <h1 class="box-title">Connexion</h1>
    <p><input type="text" class="box-input" placeholder="Nom d'utilisateur" name="user" value=""></p>
    <p><input type="password" class="box-input" placeholder="Mot de passe" name="pwd" value=""></p>
    <p><input type="submit" class="box-button" name="connexion" value="Connexion"></p>
    <p class="box-register">Vous êtes nouveau ici? <a href="inscription.php">S'inscrire</a></p>
  </form>
</body>
</html>

**Darkoos0410** · 30/05/2021, 10h09

Bonjour,

Enfaite il fallait juste choisir la bonne taille dans le css

Baptiste

Ajuster une image à son conteneur

CSS

Discussions similaires

Partager

Partager