Dessiner une courbe sur une image qui s'adapte à la largeur de l'écran

**Aldian** · 18/08/2010, 19h31

Bonjour

soit une image du type la suivante (tracée à main levée sous paint):

On m'impose qu'en fonction de la largeur de la fenêtre, l'image se redimensionne. Rien de bien ennuyeux si on ne m'imposait pas en même temps que la courbe change en fonction de la largeur de la fenêtre. C'est une courbe de type degré 3, pour laquelle les contraintes sont qu'elle démarre et se termine dans les coins supérieurs, et ne descend pas plus bas qu'un nombre donné de pixel.

Si la fenêtre est super large, il y aura donc au milieu une barre quasi horizontale assez longue. Au contraire, à mesure que l'on réduira la largeur, la portion quasi horizontale se réduira jusqu'à ce qu'il n'y ait plus qu'une courbe. Et bien sûr, l'angle de courbure des cotés variera également en fonction de la largeur de la fenêtre, sinon il suffirait de découper l'image en trois et de dupliquer le morceau du milieu.

D'où ma petite question: est-il possible de faire ça en CSS?

**ornitho13** · 18/08/2010, 21h41

Salut,

J'ai 2 solutions à te proposer:

La première, elle ne fonctionne pas sur tous les navigateurs étant donné qu'il s'agit d'une propriété CSS3 appelé background-size. On lui spécifie une largeur ( 100% pour que l'image de fond s'agrandisse en fonction de la largeur du navigateur) et une hauteur (la hauteur de l'image)

voici un exemple :

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
 
<html>
	<head>
		<style type="text/css">
			.background{
				width:100%;
				height:128px;
				position:absolute;
				top:0px;
				right:0px;
				left:0px;
				bottom:0px;
				background:url(courbesample.png) no-repeat;background-size: 100% 128px;
			}
		</style>
	</head>
	<body>
		<div class="background">
			&nbsp;
		</div>
	</body>
</html>

L'autre solution n'utilise pas a proprement parlé du css. Cela consiste par l'utilisation d'une balise "<img />" en guise de fond

voici un exemple:

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
 
<html>
	<head>
		<style type="text/css">
			.back{
				width:100%;
				height:100%;
				position:absolute;
				top:0px;
				right:0px;
				left:0px;
				bottom:0px;
			}
		</style>
	</head>
	<body>
		<div class="back">
			<img src="courbesample.png" width="100%" height="128" />
		</div>
	</body>
</html>

Je ne sais pas si c'est exactement ce que tu demandes mais ça devrait s'en rapprocher.

**Aldian** · 20/08/2010, 10h28

Bonjour

Merci beaucoup pour ces conseils. Je creuserai sans doute la deuxième possibilité, car je recherche la compatibilité IE6.

Dessiner une courbe sur une image qui s'adapte à la largeur de l'écran

Dimensionnement en CSS

Discussions similaires

Partager

Partager