18041 sujets

Questions générales et questions de débutants

Height en % ne fonctionne pas

Bonjour,

Je suis confronté à un problème bien étrange avec l'utilisation des % en CSS. Après quelques recherches, il semblerait que je ne sois pas le seul mais la réponse reste difficile à trouver. Je cherche à faire quelque chose de très très simple.
J'ai une DIV qui contient une image et j'aimerais que mon image soit croppé.

Voici mon HTML :


<div id="myDiv">
<img src="myPicture.jpg">		
</div>


Le CSS devrait ressembler à quelque chose comme çà :


#myDiv
{
  height: 50%;
  overflow: hidden;
}


Merci Smiley smile
Modifié par Gozu75 (27 Aug 2012 - 17:48)
bonsoir,

la question c'est 50% de quoi ?... le parent a t-il une hauteur definie dans le CSS qui puisse servir de référence ?

cordialement,
GC
Bonsoir gc-nomade,

la réponse c'est 50% de la fenêtre de mon navigateur, désolé, si je n'ai pas été très précis. Le parent n'avait pas vraiment de hauteur, j'ai vu au cours de mes recherches que çà pouvait avoir un lien. Du coup, j'ai rajouté height:100% à body et html. Rien n'y fait, mon image dépasse de l'écran en hauteur au lieu d'être coupé à la moitié...
La réponse semblait simple, j'étais pas loin, la voici pour ceux qui tomberont sur la même problématique :

<html>
<head>
	<style type="text/css">
		html,body{height:100%;}
		#myDiv{position:absolute;height: 50%;top:25%;}
	</style>
</head>
<body>
	<div id="myDiv">
	<img src="myPicture.jpg">
	</div>
</body>
</html>
Par contre, attention de n'avoir pas mal résolu le problème.
S'il s'agit seulement d'avoir une image croppée, autant l'intégrer déjà découpée ^^
Sujet clos
Aller à