28172 sujets

CSS et mise en forme, CSS3

Centrer une image pour des résolution faible

Bonjour,

Je suis en train de créer un site web sous Joomla pour mon association. J'ai presque fini, mais j'ai un petit souci avec la bannière : elle fait "idéalement" 1920 * 279 px.
Mais pour les résolutions inférieur, j'aimerai qu'au lieu la bannière soit positionné à gauche, qu'elle soit centrée, c'est à dire que pour les résolutions inférieur à 1920px, l'image dépasse à droite et à gauche.
Le site web est http://www.arogues.org/acvl/
Pensez-vous que cela soit possible ?

J'ai essayé de mettre des 

margin-left: auto;
margin-right: auto;

Mais ca ne fonctionne pas ...


Merci d'avance !
Antoine
Pourquoi ne pas essayer :


#banniere {
	width:100%;
	height:272px;
	background-image:url(../images/ton_image.png);
        background-position:center;
	background-size:cover; /* Ou remplacer cover par contain */
}
Bonjour,

Merci beaucoup !
Je ne peux pas utiliser le background url() car les images sont dans un jQuery pour défilement. Mais les margin 0 -XXpx fonctionne pas mal !

A+
Antoine
Bonjour à toutes et à tous.

Il y a deux questions posées !

1) comment reconnaitre la résolution d'un écran ?
2) comment adapter mon image à cette résolution ?

Pour la première question, je te propose de faire une feuille de styles pour chaque résolution qui te pose problème. L'exemple ici, est simple. Je change la couleur de fond de ma page HTML en fonction d'une valeur pivot qui est de 1500px.
La taille de mon écran est de 1440px. J'ai fait le test et cela fonctionne correctement.
Il suffit de mettre, dans les feuilles de styles, ce qui est spécifique à ton problème de résolution, et tu gardes la partie "diapositive" de la fonctionnalité en Jquery.

Comment cela fonctionne ?
Au départ, j'ai désactivé toutes les feuilles de styles.
Selon la résolution, je sélectionne l'une ou l'autre des feuilles de styles.

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>R&eacute;solution faible</title>

<style id="normal" rel="stylesheet" type="text/css">body {background-color:red;	}</style>
<style id="large"  rel="stylesheet" type="text/css">body {background-color:green;	}</style>

<script type="text/javascript">
function resolution()
{
	document.getElementById("large").disabled = true;
	document.getElementById("normal").disabled = true;

	if (screen.width>1500)	document.getElementById("normal").disabled = false;
	else			document.getElementById("large").disabled = false;
}

window.onload   = function ()	{ resolution(); }
window.onresize = function ()	{ resolution(); }
</script>
</head>

<body>
ca marche très bien !
</body>
</html>

Pour la seconde question, tu pourras positionner à gauche ton image si la résolution est de 1920px ou centrer si elle fait moins.
Je pense que tu dois aussi utiliser "overflow:hidden", afin de tronquer tout ce qui dépasse.

Je dirais que cela vient en complément de ce que propose gc-nomade.

@+
Modifié par tournikoti (10 Oct 2013 - 20:51)
Salut,

Si tu utilises Jquery, tu peux adapter le code ci-dessous:
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
	(function($){
	$.fn.Center= function(){
		this.css({
			'position' : 'fixed';
			'left' : '50%';
			'top' : '50%';
		});
		this.css({
			'margin-left': -this.width()/2 +'px',
			'margin-top': -this.height()/2 +'px'
		});
	};
	})(jQuery);
	$(document).ready(function(){
		$('#content').Center();
	});
	</script>
</head>
<body>
	<div id="content">
		blablablablablablablablablablablablablablabla
	</div>
</body>
</html>

Modifié par maxredphenix (14 Oct 2013 - 21:39)
Sujet clos
Aller à