Forum ThiWeb.com

Bonjour,

Je voudrais savoir si il est possible de créer un diaporama en html, qui s'adapte à l'écran comme le ferait une photo sur une tablette ou un smartphone.
En fait lorsque je met la valeur width 100%, l'image est bien bord à bord sur les cotés de l'écran mais comme elle est un peu haute, forcement l'ascenseur devient nécessaire pour voir la totalité de la photo.
en fait l'affichage sur une tablette est parfait; lorsque la photo est trop haute, elle est réduite en largeur pour afficher la hauteur en totalité.
est ce possible de faire un diapo de cette manière ? :?:

merci

Bonjour draquar, pour ta question je pense qu'il faut peut-être jouer sur les Media Queries.

Ainsi tu pourras adapter l'image en fonction de la taille de l'écran (le principe du responsive).

merci seven pour ta réponse.

Cela consisterait à entrer dans la feuille de style des règles détectant la résolution d'écran des visiteurs pour adapter la page ou bien lui imposer une résolution définie ?

De rien, si je peux aider c'est avec plaisir !

Je dirais que le principe c'est bien ça, je pense que tu peux mettre des règles dans le CSS pour dire à partir de telle résolution, tu applique telle hauteur (pour éviter le scroll) etc...

Après je ne sais pas trop si tu t'y connais ou bien si c'est exactement ce que tu veux faire mais ça peut-être une piste.

Va faire un tour chez Wow Slider. si j'ai bien compris ta demande ça devrait le faire.

En CSS il existe une propriété que tu peux appliquer si tu définis ton image comme un background.

C'est :

background-size : contain;

Tu peux voir les propriété plus bas dans cette page : http://www.w3schools.com/cssref/css3_pr ... d-size.asp
Clique sur les boutons oranges "Play it", tu auras un aperçu de la propriété avec le code qui va bien

Bonjour,

Merci bien pour toutes ces pistes! J'essaie de voir un peu tout pour me faire une idée.
Je ne suis pas un spécialiste du web, donc je fais avec votre aide et petit à petit j'avance.
J'ai essayé wow slider. C'est très bien, mais le diaporama reste formaté; en tout cas j'ai du mal à le personnaliser.
Je me le garde sous le coude parce que c'est quand même bien.
Je vous tiendrai au courant de mon avancé

@ Kuroro

je peux intégrer le diaporama dans un background ?

draquar a écrit :@ Kuroro
je peux intégrer le diaporama dans un background ?

Le problèlme avec les solutions toutes faites :
1. C'est pas ton code.
2. C'est mal codé (dans le sens ou c'est indigeste et pas lisible, j'espère que les mecs baisent pas comme ils codent).
3. Les balises ont toujours des noms à la con donc pour t'y retrouver bonjour, surtout que c'est pas ton code...

Je sais pas si je peux t'aider pour ton problème si t'es pas très calé (j'avoue ne pas être balèse pour expliquer les choses).

Disons que tu appelles ton images comme ça :

<img alt="Image" src="cheminfichier" title="Image" />

Ben pour appliquer la propriété CSS que je t'ai donné plus haut, tu vas plutôt avoir un truc du style :

En HTML :
<div id="Image"></div>

Le CSS :
#Image {
background-image:url('cheminfichier');
background-repeat:no-repeat;
background-size:contain;
}

Plutôt que d'appeler une image, tu appliques un fond à un élément HTML, et ce fond tu lui demandes de couvrir tout l'écran (soit en hauteur soit en largeur selon l'image) grâce à la propriété background-size : contain.

Sinon pour faire un diaporama basique essaie Xnview, ce petit logiciel libre et gratuit cache bien des choses sous son apparence anodine. Je l'utilise pour mettre aux dimensions,ajouter filigrane,et convertir pour le web , par lot en une fois... C'est quasiment magique.
télécharge la version étendue qui a bien plus de possibilité que la standart.
Xnview te permet aussi de créer des diaporamas mais aussi la page web toute prête avec le diaporama.Il y a une vingtaine de modèle type de diaporama au choix et surtout le code CSS est bien clean et très facilement modifiable, les fichiers sont bien rangés y'a pas à chercher dans le code.
Je te le conseille vivement!

Bonjour

Merci Dup pour tes infos; mais je pense continuer avec le code. Cela me semble plus personnalisable.

@ Kuroro

J'arrive bien à faire du plein écran mais avec une photo uniquement. Lorsque je passe au diaporama c'est moins évident.