IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[Galerie photo] Image qui se resize automatiquement


Sujet :

CSS

  1. #1
    Membre habitué
    Homme Profil pro
    Designer API
    Inscrit en
    Octobre 2003
    Messages
    280
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Designer API

    Informations forums :
    Inscription : Octobre 2003
    Messages : 280
    Points : 166
    Points
    166
    Par défaut [Galerie photo] Image qui se resize automatiquement
    Bonjour,

    Je dois faire une galerie photo avec du css3/html5. Je dois avoir une image taille réelle qui se redimensionne si je diminue la largeur ou la hauteur.

    La photo doit être centrée verticalement et horizontalement.

    Je dois avoir aussi une flèche a droite et a gauche pour pouvoir passer aux photos suivantes/précédentes.

    Je n'arrive pas a avoir une image centrée et en meme temps qui se redimensionne a la fois en hauteur et en largeur si je réduis ma fenêtre....

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div style="max-width:100%;">
        <img id="lightboxImage" src="http://photos1.cityvox.com/photos_400/169/83/545705.jpg" alt="" />
    </div>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #lightboxImage {
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }
    .table {
        max-width:100%;
        display:table;
        height:100%;
        width:100%;
        text-align:center;
    }
    .cell {
        display:table-cell;
        vertical-align:middle;
    }

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Bonjour,
    pour redimensionner en même temps que le resize de la fenêtre il te faut dimensionner en %.

    Pour le reste http://css.developpez.com/faq/?page=positionnement

  3. #3
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 51
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    Bonjour,

    Citation Envoyé par D4rK_C0uaK6 Voir le message
    Je dois avoir une image taille réelle qui se redimensionne si je diminue la largeur ou la hauteur.
    Ta problématique n'est pas clairement détaillée. Tu souhaites conserver les proportions, j'imagine ? Avoir l'image toujours affichée en entier ?

    Le problème du display:table c'est qu'il induit un comportement de tableau et que, par conséquent, il va adapter ses dimensions à son contenu ce qui pose problème pour le resize en %. On peut limiter l'effet pour le width en utilisant la propriété/valeur table-layout:fixed.
    Exemple qui ne fonctionne qu'avec un redimensionnement horizontal:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!doctype html>
    <html lang="fr-FR">
    <head>
    	<meta charset="utf-8">
    	<title>centrage vertical</title>
    	<style>
            html,body {
                    height:100%;
                    display:table;
                    width:100%;
                    table-layout: fixed;    
            }
            
            body {
                    display:table-cell;
                    vertical-align:middle;
            }
            
            img {
                    display:block;
                    max-height:100%;
                    max-width:100%;
                    margin:0 auto;          
            }
            </style>
     
     
    </head>
     
    <body>
    	<img src="image.jpg" alt="image" style="width:600px;">
    </body>
    </html>
    Le deuxième problème est que l'image doit garder ses proportions même lorsque le 100% de la fenêtre est plus petit que la taille réelle de l'image alors que l'autre dimension est, elle assez grande. Et là, je ne vois pas trop comment faire, sans recourir à du javascript, en dehors de l'utilisation de la propriété/valeur css3 background-size:contain (vu que tu précises pouvoir utiliser css3/html5, cela ne devrait pas poser de problème). Cette propriété gère précisément qui, de la largeur ou la hauteur, doit servir de référence pour le redimensionnement.

    Un exemple minimaliste de ce qui est faisable (fonctionne à partir d'IE9):
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
     
    <!doctype html>
    <html lang="fr-FR">
    <head>
    	<meta charset="utf-8" />
    	<title>centrage vertical</title>
    	<style>
            html,body {
                    height:100%;
                    display:table;
                    width:100%;
            }
            
            body {
                    display:table-cell;
                    vertical-align:middle;
            }
            
            div {
                    width:100%;
                    height:100%;
                    margin:0 auto;
                    background:no-repeat center;
                    background-size:contain;
            }
     
            </style>
     
     
    </head>
     
    <body>
    	<div style="background-image:url(image.jpg);max-width:600px;max-height:450px;"></div>
    </body>
    </html>
    Note: le max-width et max-height sur le div sont les dimensions d'origine de ton image afin d'éviter l'agrandissement de l'image.
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

Discussions similaires

  1. Image qui s'étire automatiquement dans le centre
    Par didouchy dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 24/03/2011, 18h15
  2. Galerie d'image qui bugue
    Par misshelen dans le forum Langage
    Réponses: 5
    Dernier message: 22/01/2009, 12h43
  3. Réaliser une galerie photo automatique sans php
    Par vallica dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 01/10/2006, 11h57
  4. [Image]Photos modification de la taille automatiquement ?
    Par chakan dans le forum Bibliothèques et frameworks
    Réponses: 5
    Dernier message: 29/03/2006, 04h04
  5. galerie d'image qui s'ouvre dans une autre fenêtre
    Par crampouz dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 17/02/2006, 15h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo