Diaporama autoresize

Marca -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention - 10 déc. 2013 à 00:43

Bonsoir à tous,

je sais que la question a été traité des milliards de fois et j'ai testé pas mal de slideshow utilisant Jquery, de la bidouille avec css..mais je ne suis jamais réellement parvenu à obtenir ce que je voulais.

Ma question est:

Suppossons que l'on ait une div de 800px de largeur et 400 de hauteur.
Comment insérer une image à l'intérieur tout en gardant ses proportionnalités?
Je voudrais que cela fonctionne vraiment pour toutes tailles d'images (en portrait ou en paysage). La hauteur doit toujours être de 400px, et si la photo est en mode portrait on aurait des blocs vides (noirs) sur chacun des 2 cotés.

Une idée?

Afficher la suite

A voir également:

Diaporama autoresize
Faire un diaporama photo avec musique windows 10 - Guide
En préparant son diaporama, tom a pris quelques notes qui l'aideront lors de sa présentation. quand il présentera l'âne, il a prévu de raconter une anecdote sur cet animal. comment s'appelle l'âne de son histoire ? - Forum Windows
Mettre plusieurs musique sur diaporama powerpoint - Forum Powerpoint
Enchainement de musique sur un diaporama powerpoint - Forum Powerpoint
Diaporama gratuit - Télécharger - Visionnage & Diaporama

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Bonjour

tu ne mets aucune dimension à l'image dans le html

<div class="image"><img src="portrait.jpg"></div>
<div class="image"><img src="paysage.jpg"></div>

dans le css tu fais ca

.image {
width:800px;
height:400px;
text-align:center;
background-color:black;
}

.image img {
height:100%;
}

Voila

si c'est pour un diaporama il est quand même conseillé que toutes les images aient la meme dimension ou proportion ca fait plus pro

Un petit merci vaut mieux qu'une grande ignorance

Marca

oui c'est pour un diaporama justement, mais je ne trouve pas quelque chose de simple et qui garde en meme temps les proportions.
Merci pour ton code, mais si on insère une image don't la width est plus grande que 800px, l'image déborde.

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Réflechi

800 X 400 (ta div) c'est une proportion 4 X 2. Si tu as une image aux proportion 5 X 2 et que obligatoirement l'image doit faire 400 de haut et bien la largeur d'affichage sera supérieure a 800 px (400 / 2 ) X 5 = 1000 px donc ca déborde !

sinon tu as cette solution pour ne pas que ca déborde et pour aligner l'image verticalement (tu dois rajouter un div)
les images qui font moins que 800 X 400 seront centrées et a taille rélle

html

 <div class="contentimg">
<div class="content"><img src="paysage.jpg"></div>
 </div>
 <div class="contentimg">
<div class="content"><img src="portrait.jpg"></div>
 </div>

css

 
 .contentimg {
  display:table;
   width:800px;
   }
   .content {
   width:100%;
   height:400px;
   text-align:center;
   background-color:black;
   text-align: center;   
   vertical-align: middle;
   display: table-cell; 
   }
   .content img {
   max-width:800px;
   max-height:400px;
   }

Discussions similaires

Durée d'une diapositive animée

Inserer plusieurs musiques dans un diaporama

Extension de fichier powerpoint

diaporama powerpoint "type amicalement votre"

l'extension des fichiers powerpoint

Votre réponse

Discussions similaires