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 :

Adapter images horizontales et verticales dans un carousel bootstrap/ borner la hauteur


Sujet :

Dimensionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2020
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Septembre 2020
    Messages : 9
    Par défaut Adapter images horizontales et verticales dans un carousel bootstrap/ borner la hauteur
    Bonjour,

    J'ai réalisé un carousel bootstrap basique en le personnalisant un peu (pas de défilement mais action seulement par les flêches).
    Je l'ai disposé dans une row divisée en deux : à gauche les captions et les flèches de défilement, à droite l'image (voir capture d'écran ci-dessous).
    Pour les images horizontales (ou carré) c'est parfait : elles s'adaptent à la colonne de droite et leur largeur est bornée par la largeur de la colonne.
    Par contre, pour les images verticales, celles-ci prennent la largeur de la colonne mais, du coup, la hauteur est bien trop grande (à mon goût) et je ne souhaite pas de scroll.
    J'aimerais trouver une solution pour que la hauteur du carousel soit "borné" (par exemple quel la hauteur soit égale à la largeur" du contenantsans que l'image soit rognée ou déformée.
    Je ne sais pas si je dois agir sur le css du carousel-inner, sur celle du carousel-item, du d-block ... quelqu'un aurait-il une solution ?

    voici le html :
    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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable =0">
        <title>lightbox1</title>
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
      <body background="img/fondweb2.jpg" "></body>
     
        <p style="font-size: 1.4em; line-height: 10px;margin-left: 20px;margin-top:81px"> Arnaud Fromont<p>
        <p style="line-height: 1px; margin-left: 48px;letter-spacing : 5px;">visuaus</p>
     
    <!--grand container-->
      <div class="container">
        <div id="carouselExampleControls" class="carousel " data-ride="carousel" data-interval="false" ">
          <div class="carousel-inner" >
            <div class="carousel-item active">
                <div class="row">
                    <div class= "col-sm-4 col-md-3 col-lg-4 " >
                        <div id="myfigcaptionlb">
                          <figcaption>
                            <div id="legendlb">
                              <p>mur nébuleux</p>
                              <p>photo</p>
                              <p>marseille 2019</p>
                            </div>
                          </figcaption>
                        </div>
     
                    </div>  
                    <div class= "col-sm-8  col-md-9 col-lg-8">
                        <img   class="d-block w-100" src="img/planche7/cooursint1.jpg" alt="#">
                    </div>
                </div>                    
            </div>
            <div class="carousel-item ">
                  <div class="row">
                      <div class= "col-sm-4 col-md-4 col-lg-4 " >
                          <div id="myfigcaptionlb">
                            <figcaption>
                              <div id="legendlb">
                                <p>mahakala</p>
                                <p>photocomposition</p>
                                <p>marseille 2019</p>
                                <p>auvergne 2016</p>
                              </div>
                            </figcaption>
                          </div>
                      </div>  
                      <div class= "col-sm-8  col-md-8 col-lg-8">
                          <img   class="d-block w-100 " src="img/planche7/paret_mahakala.jpg"  alt="#">
                      </div>  
                  </div>
            </div>
            <div class="carousel-item ">
                  <div class="row">
                      <div class= "col-sm-4 col-md-4 col-lg-4 " >
                          <div id="myfigcaptionlb">
                            <figcaption>
                              <div id="legendlb">
                                <p>tunnel</p>
                                <p>photo</p>
                                <p>sorrento 2018</p>
                              </div>
                            </figcaption>
                          </div>
                      </div>  
                      <div class= "col-sm-8  col-md-8 col-lg-8">
                          <img   class="d-block w-100" src="img/planche7/tunnel_sor.jpg"  alt="#">
                      </div>  
                  </div>
            </div>
     
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                  <span id="mesicons"><</span>
                  <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                  <span id="mesicons">></span>
                  <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
     
      <!-- script-->
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script$('.carousel').carousel()></script>
    </body>
    </html>


    et le Css:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    .container {margin-top: 20px; position: absolute; overflow-y: scroll;scrollbar-width: none;max-width: 900px;padding-right: 43px;padding-left:0px;}
    .carousel-inner {transition:all 0.5s ease;}
    .d-block  { float:right; }
    #myfigcaptionlb {margin-top: 20px;margin-left: 15px;}
    #mesicons {color: black;font-size: small ;}  
    .carousel-control-next {left:0px;height: 30px; width:30px;margin-top: 190px;}
    .carousel-control-prev {left:0px;height: 30px; width:30px;margin-top: 210px;}

    capture d'écran avec une image verticale (mahakala, la deuxième sur les trois) :
    dans ce cas précis l'image originale est plus longue, elle se trouve donc rognée dans la mesure ou je ne souhaite pas de sroll.
    Nom : Capture d’écran 2020-12-11 à 17.08.04.png
Affichages : 772
Taille : 1,24 Mo

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Bonjour,
    discussion résolue ou non

    Tu peux néanmoins regarder la solution que je proposais dans cette discussion : Ecrire du texte par dessus une image responsive sans que le texte ne déborde, la partie dimensionnement de l'image peut t'intéresser.

  3. #3
    Membre averti
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2020
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Septembre 2020
    Messages : 9
    Par défaut
    Bonsoir Nos Smoking,
    Le problème de la hauteur borné du carousel n'est pas résolue.
    J'ai regardé le lien que tu m'a envoyé mais je t'avoue que je ne vois pas quelle partie pourrait résoudre mon problème.

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    mais je t'avoue que je ne vois pas quelle partie pourrait résoudre mon problème.
    c'est de cette partie que tu peux t'inspirer sachant que des méthodes existent comme par exemple object-fit: contain; pour les navigateurs modernes.

    pour les <img> :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    img {
      display: block;
      max-height: 100vh;        /* IMPORTANT à définir correctement */
      max-width: 100%;
    }
    il est important de définir la hauteur autrement qu'en % car on n'a pas défini de hauteur à l'élément parent <figure>.

    La propriété CSS object-fit

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Mettre des images dans un carousel bootstrap
    Par Vins75 dans le forum Langage
    Réponses: 8
    Dernier message: 28/11/2019, 21h51
  2. Aligner image horizontalement et verticalement
    Par diane621 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 28/01/2018, 11h44
  3. Des lignes horizontales et verticales dans des gtk_tables
    Par eric1708 dans le forum GTK+ avec C & C++
    Réponses: 15
    Dernier message: 03/10/2013, 08h51
  4. Centrer image horizontalement et verticalement
    Par the_lord_sith dans le forum Interfaces Graphiques en Java
    Réponses: 1
    Dernier message: 31/05/2013, 03h02
  5. Centrer une div , horizontalement et verticalement, dans un TD
    Par neo_2000_2006_59 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 22/06/2011, 10h53

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