taille variable et rapport carré d'un div

Version imprimable

30/06/2010, 16h49
René N013

taille variable et rapport carré d'un div
Salut,

j'ai un souci. C'est inévitable où je n'ouvrirais pas cette discussion. Je m'excuse si la solution se trouve sur le forum. J'ai cherché : je n'ai pas trouvé.

J'ai un <div id:"central"> dans lequel se place une image variable, toujours carrée. Pour le moment j'ai ça :
Code:

1 2 #central {height:76%; top:12%; position:absolute; text-align:center;} #central img {height:100%; top:0px; left:0px;}
Le Problème c'est que je ne parviens pas à faire en sorte que width soit égal à height pour ne pas déformer l'image et que la taille du div central reste variable et proportionnel à l'écran de l'utilisateur.

Je vous remercie de toute l'aide que vous pourrez m'apporter.

Bonjour,

Avec les informations données tout fonctionne correctement... :aie:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
    <title>Test</title>
	<style type="text/css">
		#central {height:76%; top:12%; position:absolute; text-align:center;}
#central img {height:100%; top:0px; left:0px;}
	</style>
	</head>
<body>
<div id="central"><img alt="logo" src="http://www.developpez.net/template/images/logo.gif"></div>
</body></html>

devyan

30/06/2010, 19h06
René N013

Merci Devyan pour ta réponse et ton exemple.

La question de l'imbrication jouait dans mon cas.
Ton exemple m'a fait me rendre compte des quelques erreurs que j'avais commises.

Merci beaucoup.

La prochaine fois je ferai de ces fichiers test tout simple mais qui aident la comparaison.
30/06/2010, 20h41
Bovino

Citation:

Envoyé par devyan

Avec les informations données tout fonctionne correctement... :aie:

A part :

Citation:

Envoyé par René N013

J'ai un <div id:"central">

:aie:

Code:

<div id="central">