28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer des images plus grande que le conteneur

Bonjour,

J'ai un petit problème lors la création d'un widget qui affiche des images en slideshow.

Mon conteur principale a une taille de 250px.

Pour l'affichage des images < 250px aucun problème.

Le problème est pour les images > 250 px. Je voudrais les afficher avec comme centre le centre de l'image sur une largeur total de 250px.

Est-ce possible uniquement en CSS ? ou faut-il passer par du Javascript.

J'ai parcouru le forum mais j'ai rien vu de ce type.

Merci de votre aide,
Stéphane
Modifié par sbou (20 Sep 2010 - 15:55)
pas bien compris ..

tu veux rédimensionner ton image en 250px ?
#contenur img{width:250px;}

ou alors l'affiché simplement centrée dans ton conteneur qui fait 250px ?
#contenur img{position:absolute;margin:auto;right:-10000px;left:-10000px;}

en masquant ce qui dépasse ?
#contenur {overflow:hidden;}
#contenur img{position:absolute;margin:auto;right:-10000px;left:-10000px;}
Modifié par bogs (20 Sep 2010 - 03:00)
Salut sbou

Il y a un tutoriel qui parle de positionnement centrer.
Il s'agit d'un conteneur et on utilise la marge négative ici dans la section marge négative : J'imagine que les principes de bases peuvent s'appliquer aux éléments placer dans un conteneur.

Il s'agit de la largeur du conteneur / 2 - de même pour la hauteur / 2.

Nous centrons donc à partir de la valeur par défaut, c'est à dire le coin supérieur gauche du conteneur par une valeur négative : width:250px et height:250px fera donc -125px en « margin-top et margin-left ». Peut-être que le tutoriel t'inspirera des solutions pour ta recherche.

++
Modifié par zardoz (20 Sep 2010 - 03:49)
Bonsoir,

Merci de ton retour bogs, ce que je veux faire est le 3 ème cas ( que j'avais mal expliqué)
Une image centré dans son conteneur en masquant ce qui dépasse.

Quand je fais cela :



	#conteneur {
	    overflow:hidden;
		width:250px;
		border: solid 1px;
	}
	
	#conteneur img{
		position:absolute;
		margin:auto;
		right:-10000px;
		left:-10000px;	
	}
    </style>
  </head>
  <body>
	<div id="conteneur">
			<img src="img_320px.jpg" />
	</div>
  </body>


Mon image n'est pas dans le conteneur mais elle est centré dans la page.

Pour zardoz, le problème c'est que je dois center des images qui n'ont pas toujours la même largeur. ( le but est de faire un slideshow de différentes images)
Sinon je suis d'accord avec les marges négative il n'y a pas de problème.

Merci de ton aide
Stéphane
Modifié par sbou (20 Sep 2010 - 03:58)
sbou a écrit :


Mon image n'est pas dans le conteneur mais elle est centré dans la page.

oui, excuse-moi, rajoute un "position:relative;" à ton conteneur. 

#conteneur { 
        overflow:hidden; 
        width:250px; 
		height:250px;
        border: solid 1px; 
        position:relative;
    } 
     
    #conteneur img{ 
        position:absolute; 
        margin:auto; 
        right:-2000px; 
        left:-2000px;     
    }


ps: l'image étant en position absolute, elle sort du flux de ton conteneur, il faut donc gérer le "height" de ton conteneur.


edit: si tu veux que ton conteneur prenne la même "hauteur" que ton image, voici une solution (dégueux?) : 


<head>
<style type="text/css">
#conteneur { 
        overflow:hidden; 
        width:250px; 
        border: solid 1px; 
        position:relative;
    } 
    #conteneur .heightfix{ 
	    visibility:hidden;
    } 
    #conteneur .top{ 
        position:absolute; 
        margin:auto; 
        top:0px;
        right:-2000px; 
        left:-2000px;     
    } 
    </style> 
  </head> 
  <body> 
    <div id="conteneur"> 
            <img class=heightfix src="http://forum.alsacreations.com/skins/alsacreations/p_new.gif" /> 
            <img class=top src="http://forum.alsacreations.com/skins/alsacreations/p_new.gif" /> 
    </div> 
  </body>

Modifié par bogs (20 Sep 2010 - 11:59)
Merci beaucoup bogs,

J'aurais du penser au "position:relative"

Mes images ont toutes la même hauteur, mais je garde sous le coude la solution "dégueux"

Stéphane
Sujet clos
Aller à