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:

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 737
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 737
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

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

Une musique qui évoque le souvenir ?

Transition automatique diapo suivant

diaporama powerpoint "type amicalement votre"

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