11540 sujets

JavaScript, DOM et API Web HTML5

Slide, image 100% largeur écran

Bonjour,
Je cherche a faire en sorte que les images qui servent pour mon slide ainsi que celle pour illustrer mes articles fassent 100% de la largeur de l'écran mais soit limité a une certaine hauteur, même si cela oblige a zoomer l'image.
De même en redimensionnant le navigateur l'image s'adapte.

Je ne sais pas si c'est faisable en CSS ou s'il faut utiliser un script Jquery, si oui lequel ?

Merci de votre aide.
Je dirais plus précisément un conteneur autour de l'image - figure ou div - avec un max-height et overflow: hidden, et ton image à l'intérieur avec un min-width:100% par exemple ( beurk mais bon, c'est bien ce que tu veux faire).

Tu peux aussi éventuellement passer ton image en background css, et utiliser background-size - mais c'est probablement moins évident dans le cadre d'un slide.

Bon courage !
Bonjour et merci pour vos réponses.
voici ce que j'ai testé : 
<div style="background-image: url("/images/template/v1/slide-test-1.jpg"); text-align: center; background-repeat: no-repeat; height: 600px; max-height: 600px; background-size: contain; overflow: hidden; background-position: center center;"> </div>

L'image s'adapte bien quand je réduit ma page, mais pas si la largeur de l'image est inférieur a la largeur de ma page.

Une idée ?

ps : Je sais, c'est dans un style et non pas dans une class, mais c'est pour faire mes tests, c'est plus facile avec FF Smiley cligne
Modifié par christobal (14 Nov 2012 - 10:12)
Alors déjà, il serait plus que judicieux que tes images soient optimisées un minimum et qu'elles aient sensiblement les mêmes proportions que ton slideshow.. histoire qu'on ne masque pas les 3/4 de l'image - un extrême que tu n'atteins pas je pense ><

Ensuite, as-tu essayé en laissant ta balise image ? C'est à mon avis la meilleure solution, par rapport à background-size qui te posera forcément des problèmes - notamment pour la compatibilité. La première technique que je t'ai suggérée est plus robuste.
Oui en effet il faut que mes images soient dans des ratios corrects pour ne pas trop rogner l'image.
Sinon j'ai fait un class que j'ai appliqué directement sur l'image et en effet le résultat est parfait.
voici ma class au cas ou.

.slide-img {max-width: 100%;height: auto; width: auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Je reviens sur le sujet car bien que tout fonctionne, il y a un petit détail qui m’embête.
Pour vous donner une idée, j'ai mon image qui me sert de bandeau (960x360px)et juste en dessous une div avec un fond bleu.
Les deux se touche.
J'ai remarqué que lorsque l'image était redimensionner (plus petite), il y avait un espace de 2px qui apparaissait entre l'image et la div.
Comment faire pour la supprime.
un margin-bottum de -2px, répond au pb quand il y a redimensionnement, mais quand l'affichage est normal il y a superposition de l'image sur la div, et c'est pas très chouette.
le z-index ne régle pas le pb.
Merci de votre aide;)
Sujet clos
Aller à