18041 sujets

Questions générales et questions de débutants

Empecher les débordements d'une image trop grande pour la div

Bonjour les amis!

J'ai un petit probème avec ce code! Je vous explique je suis en train de faire un site responsive! J'ai une image (width: 1920px, height: 450px) qui est contenu dans la div slide (width: 100%, height: 450px). Cette image doit etre centré à l'intérieur de cette div. Quant la taille du navigateur est inférieur à 1920px, les cotés gauche et droit de l'image doit disparaitre. Malheureusement, avec ce code actuel, le côté droit de mon image continu à apparaitre, laissant une marge blanche sur le coté droit de ma fenetre en dehors du body 100% du navigateur.
Alors, comment faire pour que mon image soit rognée des deux cotés??

<div class="slide">
	<img class="visuel" src="images/slide/modern warfare.jpg" />
</div>


body {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.slide {
	width: 100%;
	height: 480px;
	text-align: center;
}
.visuel {
	width: 1920px;
	height: 480px;
	position: absolute;
	margin-left: 50%;
	left: -960px;
}
Administrateur
Bonjour,

Tu peux ajouter max-width pour contenir les dégâts puis enlever height pour pouvoir garder les proportions de ton image.
Voilà un exemple : http://codepen.io/anon/pen/sHmAL
<div class="slide">
  <img class="visuel" src="http://dummyimage.com/600x400/0070d9/ebd80c.png&text=Du" />
</div>

body {
	margin-left: auto;
	margin-right: auto;
}
.slide {
	width: 100%;
}
.visuel {
	width: 1920px;
        max-width: 100%;
	position: absolute;
}


Tu peux lire Un reset “responsive” pour les images, billet de Raphaël avec commentaire de Stéphanie et de ma pomme concernant IE (j'en avais oublié la moitié mais j'ai pris l'habitude de laisser les attributs width et height sur les éléments img ; marre de constater la disparition de ceux-ci sur IE ! Et IE9 n'est pas exempt de bug, toujours tester avec chaque version d'IE Smiley cligne )
Justement, je veux que la hauteur reste toujours de 450 px et que le l'image glisse horizontalement dans la div! donc du coup t'as solution ne convient pas
Bonjour,

déjà évoqué ces derniers mois sur ce forum.
il s'agit de centré l'image a l'aide de text-align et line-height en lui donnant une taille virtuel de zero a l'aide de marge négative.

Les marges négatives réduisent l'espace nécessaire à son interaction avec les autres éléments , elle peut donc rester centré dans un element plus petit qu'elle, Théoriquement réduite a une hauteur et largeur de zéro, elle glisse en étant absorbé sur les coté de son conteneur. Elle se comporte exactement comme si elle etait en positionnement absolut sans interagir dans le flux.

http://codepen.io/gc-nomade/full/DxCgv (2 boite de taille differente avec le second en position:absolute qui est facultatif )

Si il y a des navigateur récalcitrant, merci de faire des retours, des fois que les safari de chez mac y trouvent a recalibrer l'espace d'affichage de l’élément

http://codepen.io/gc-nomade/pen/DxCgv code editable
salut, ou encore plus simple, avec un centrage en positionnement absolue combiné à un "overflow:hidden". Tu dois cependant passer ton conteneur d'images en position relative pour qu'il reste malgré tout la référence. Juste au passage "text-align:center" est un propriété héritée donc si tu l'a spécifie au <body>, pas la peine de la remettre à chaque fois.

body {
	margin:auto;
	text-align: center;
}
.slide {
	overflow:hidden;
	position:relative;
	width: 100%;
	height: 480px;
}
.visuel {
	position: absolute;
	top:0;
	left:50%;
	margin-left: -960px;
}
Sujet clos
Aller à