Diaporama autoresize

Fermé

Marca - Modifié par Marca le 9/12/2013 à 20:44
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 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?

A voir également:

Diaporama autoresize
Faire un diaporama photo avec musique windows 10 - Guide
Dans le diaporama à télécharger, les diapositives s'enchaînent automatiquement. que peut-on dire de la diapositive crayon ? - Forum Powerpoint
Diaporama gratuit - Télécharger - Visionnage & Diaporama
Musique pour diaporama souvenir enfance - Forum Musique / Radio / Clip
Problème de crayon ✓ - Forum Blender

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 9/12/2013 à 22:45

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
9 déc. 2013 à 22:50

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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 10/12/2013 à 01:10

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

Une musique qui évoque le souvenir ?

Boucle sur la première diapositive d'une présentation

Problème d'animation dans une présentation avec PowerPoint2016

diaporama powerpoint "type amicalement votre"

suggestion de chanson pour montage photo

Discussions similaires

Newsletters