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

**AMarsEli** · 11/12/2020, 17h20

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’écran 2020-12-11 à 17.08.04.png
Affichages : 776
Taille : 1,24 Mo

Nom : Capture d’écran 2020-12-11 à 17.08.04.png
Affichages : 776
Taille : 1,24 Mo

**NoSmoking** · 11/12/2020, 18h12

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.

**AMarsEli** · 11/12/2020, 18h50

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.

**NoSmoking** · 13/12/2020, 16h49

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

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

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager