28217 sujets

CSS et mise en forme, CSS3

Taille d'une image en fonction d'un conteneur (<div> ou autre

Bonsoir à toutes et à tous,

alors j'ai un souci pour adapter la taille d'une image par rapport à son conteneur... et puis je sais même pas si c'est possible... Smiley biggol

Alors j'ai ceci en css :
html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
img {
	margin: 0px;
	padding: 6px;
}
.plan {
	width: 100%;
	height: 100%;
	background-color: #017167;
	text-align: center;
}


et en html : 

<body>
<h1>Plan d'accès</h1>
<div class="plan"><img src="plan1.gif" alt="" title="" /></div>
</body>


ici mon div prend 100% de la largeur de ma page. J'aimerais que l'image prenne aussi les 100% (moins le padding) de mon div.

C'est possible ?

@+ Smiley cligne
Salut
Non je ne pense pas, il manque les attribut height et width pour ton image, peut etre que tu peux mettre 100% dans ces attributs, à vérifier

Edit : Voir réponse plus bas j'avais tout faux désolé
Modifié par Super_baloo8 (16 Nov 2005 - 00:45)
oui oui c'est possible:
 img {
	margin: 0px;
	padding: 6px;
	width:100%;
}

Modifié par yyoupla (16 Nov 2005 - 00:06)
Merci à vous tous ! Smiley biggrin

Sauf que je me suis mal exprimé... désolé Smiley langue
En faite, je ne veux pas que l'image s'agrandissent ! Smiley langue pour ne pas la pixeliser davantage...
Mon souci est d'adapter la taille de l'image lorsque la fenêtre est plus petite... c'est à dire :
- fenêtre petite : taille image = 100% du conteneur - padding
- fenêtre grande : taille image = dimensions réelles

Vous voyez ce que je veux dire ? Smiley smile
aggrandir ou réduir, le résultat est le même, tu perds en qualité.
surtout un redimensionnement par le navigateur : beurk.
Je doute que ce soit une bonne solution

Je ne sais pas si cela peut t'aider mais tu peux utiliser les propriété max-width et max-height (à 100%) pour limiter l'aggrandissement de l'image.

Après, il faudrait peut-etre voir sur une application concrète.
Sujet clos
Aller à