Dimension d'une image relative à la résolution ?

Bonjour !

Je cherche à rendre les dimensions d'une image (svg) relative à la résolution de l'écran. En 1920*1080, une image de 200 pixels de large ne pose pas de gros problème, mais ce n'est plus le cas en 1280* 1024 ou autre.

J'ai d'abord pensé à créer un conteneur qui fasse 100% de la largeur et de la hauteur de la page et à relativiser la taille de l'image par rapport au conteneur, mais cela ne semble pas marcher et, de plus, provoque un mauvais alignement de l'image à droite qui se détache du bord droit.

#grec {
	background-image: url(img/grec.svg);
	position: absolute;
	float:right;
	right: 0px;
	margin-top: 5%;
	width:200px; 
	height: 682px;
}

Comment pourrais-je procéder ? Merci.

Bonjour,

Tu peux utiliser la propriété CSS3 background-size

Merci. J'ai bien essayé de jouer avec la propriété, mais soit l'image s'enfonce vers la droite (sans barre de défilement) lorsque l'on réduit la taille de la fenêtre, soit l'image subit une déformation sans que, quoi qu'il en soit, il y ait mise à l'échelle :

#grec {
	background-image: url(img/grec.svg);
	background-repeat: no-repeat;
	background-size: 200px 682px;
	position: absolute;
	float:right;
	right: 0px;
	margin-top: 5%;
	width: 11%; 
	height: 69%;
}

Ce que je souhaiterai, c'est effectivement que l'image occupe disons environ 10% de la largeur de la page. Mais la propriété ne semble pas permettre une mise à l'échelle ?