Ajuter le libellé à la taille d'une image en CSS

Signaler
Messages postés
255
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
17 mai 2020
-
Messages postés
28930
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 mai 2020
-
Bonjour,
J'ai plusieurs images s'affichant en carousel.
Les image ayant des largeurs différentes, je cherche
à adapter la largeur d'un bandeau à la largeur de l'image.
Exemple une image de 300px de large, le bandeau s'adapte (css- width: 100%)
la deuxième image a une largeur de 200px, le badeau reste à 300px;
Merci de votre aide.
Cordialement

2 réponses

Messages postés
28930
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 mai 2020
2 467
Carousel fait comment ? Tu l'as créé toi même ou utilisé une lib Javascript/jquery ?
Quel code html ?
Quel code css ?
Quel code JS ?

Sans un minimum d'infos... impossible de te répondre.

Et en fonction... on placera ta question dans le bon forum.....
Messages postés
255
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
17 mai 2020
9
Merci pour la réponse.
Code html (bootstrap carousel)
<div class="container">
  <div class="slideshom mt-3 mb-2">
   <div class="row">
    <div class="col-8 offset-2">
     <div id="carousel-indicator" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2500">
      <div class="carousel-inner photo">
       {% for key, diapo in diapos %}
        {% if loop.index == '1' %}
         <div class="carousel-item active">
          <img class="d-block img_size" src="{{ diapo.src }}" alt="">
          <div class="overlay">
           <p>{{ loop.index ~ ' / ' ~ nb }}</p>
          </div>
          <div class="caption">
           <p>{{ diapo.titre }}</p>
          </div>
         </div>
        {% else %}
         <div class="carousel-item">
          <img class="d-block" src="{{ diapo.src }}" alt="">
          <div class="overlay">
           <p>{{ loop.index ~ ' / ' ~ nb }}</p>
          </div>
          <div class="caption">
           <p>{{ diapo.titre }}</p>
          </div>
         </div>
        {% endif %}
         <div class="clearfix"></div>          
       {% endfor %}
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>

Code css :
.carousel-item img {
 border-radius: 8px;
}
.carousel-item .overlay {
 position: absolute;
 top: 0;
 left: 0;
 height: 40px;
 font-family: 'Roboto', sans-serif;
 color: #f8f8f8;
 background-color: rgba(54, 55, 50, 0.7);
 border-bottom-right-radius: 8px;
}
.carousel-item .caption {
 position: absolute;
 bottom: 0;
 left: 0;
 width: float;
 height: 40px;
 background-color: rgba(54, 55, 50, 0.7);
 border-top-right-radius: 8px;
 border-bottom-left-radius: 8px;
 overflow: hidden;
}
.carousel-item .caption p {
 padding: 8px;
 font-family: 'Operator Mono Lig', sans-serif;
 font-size: 125%;
 font-style: italic;
 font-weight: 300;
 color: #f8f8f8;
}
.carousel-item .overlay {
 padding: 8px;
}

Pas de code JS, sinon celui de bootstrap.
Code PHP du tableau des images :
<?php 
$diapos = [
  ['src' => './img/mad/mart001.jpg', 'titre' => 'A l\'heure du Rhum'],
  ['src' => './img/mad/mart002.jpg', 'titre' => 'Habitation Céron, le zamana'],
  ['src' => './img/mad/mart003.jpg', 'titre' => 'Château Dubuc'],
  ['src' => './img/mad/mart004.jpg', 'titre' => 'Bord de mer au couchant à Sainte-Luce'],
  ['src' => './img/mad/mart005.jpg', 'titre' => 'Balade à Anse Noire, Martinique'],
  ['src' => './img/mad/mart006.jpg', 'titre' => 'Pont reliant Grand Rivière'],
  ['src' => './img/mad/mart007.jpg', 'titre' => 'Belle vue du haut de l\'Anse Dufour'],
  ['src' => './img/mad/mart008.jpg', 'titre' => 'Hibiscus'],
  ['src' => './img/mad/mart009.jpg', 'titre' => 'Plage au sud de Saint Pierre'],
  ['src' => './img/mad/mart010.jpg', 'titre' => 'Petite plage sauvage à Sainte-Luce'],
  ['src' => './img/mad/mart011.jpg', 'titre' => 'Dominer le monde'],
  ['src' => './img/mad/mart012.jpg', 'titre' => 'Le Tombolo de Sainte Marie'],
  ['src' => './img/mad/mart013.jpg', 'titre' => 'Grand Anse à la tombée du soir'],
  ['src' => './img/mad/mart014.jpg', 'titre' => 'Église des Anses d\'Arlet'],
  ['src' => './img/mad/mart015.jpg', 'titre' => 'Poissons dans les eaux limpides des Anses d\'Arlet'],
  ['src' => './img/mad/mart016.jpg', 'titre' => 'Coucher de soleil aux Anses d\'Arlet'],
  ['src' => './img/mad/mart017.jpg', 'titre' => 'Retour de pêche en Martinique'],
  ['src' => './img/mad/mart018.jpg', 'titre' => 'Rougeoyant coucher de soleil en Martinique'],
  ['src' => './img/mad/mart019.jpg', 'titre' => 'Tortue évoluant dans une eau limpide'],
  ['src' => './img/mad/mart020.jpg', 'titre' => 'Les cocotiers de la Martinique'],
  ['src' => './img/mad/mart021.jpg', 'titre' => 'Un matin à Grande Anse'],
  ['src' => './img/mad/mart022.jpg', 'titre' => 'Diamant à l\'horizon'],
  ['src' => './img/mad/mart023.jpg', 'titre' => 'Le Tombolo'],
  ['src' => './img/mad/mart024.jpg', 'titre' => 'Pointe Borgnèse'],
  ['src' => './img/mad/mart025.jpg', 'titre' => 'Église des Anses d\'Arlet'],
  ['src' => './img/mad/mart026.jpg', 'titre' => 'En arrière plan - la Montagne Pelée'],
  ['src' => './img/mad/mart027.jpg', 'titre' => 'Anse Couleuvre'],
  ['src' => './img/mad/mart028.jpg', 'titre' => 'Ruines du Château Dubuc'],
  ['src' => './img/mad/mart029.jpg', 'titre' => 'Iguane'],
  ['src' => './img/mad/mart030.jpg', 'titre' => 'Anse Figuier'],
  ['src' => './img/mad/mart031.jpg', 'titre' => 'Flamboyants en fleurs'],
  ['src' => './img/mad/mart032.jpg', 'titre' => 'Anse Noire'],
  ['src' => './img/mad/mart033.jpg', 'titre' => 'La plage des Boucaniers'],
  ['src' => './img/mad/mart034.jpg', 'titre' => 'Sentier du littoral, Sainte-Luce'],
  ['src' => './img/mad/mart035.jpg', 'titre' => 'Végétation sur la Pelée'],
  ['src' => './img/mad/mart036.jpg', 'titre' => 'Jardin de Balata'],
  ['src' => './img/mad/mart037.jpg', 'titre' => 'Rocher du Diamant'],
  ['src' => './img/mad/mart038.jpg', 'titre' => 'Cascade domaine d\'émeraude'],
  ['src' => './img/mad/mart039.jpg', 'titre' => 'Zamana'],
  ['src' => './img/mad/mart040.jpg', 'titre' => 'Matoutou Falaise'],
  ['src' => './img/mad/mart041.jpg', 'titre' => 'Rocher du Diamant vu de la plage'],
  ['src' => './img/mad/mart042.jpg', 'titre' => 'Coucher de soleil sur la mer des Caraïbes'],
  ['src' => './img/mad/mart043.jpg', 'titre' => 'Coucher de soleil en Martinique'],
  ['src' => './img/mad/mart044.jpg', 'titre' => 'Plage des Salines'],
  ['src' => './img/mad/mart045.jpg', 'titre' => 'Anoli ou zandoli'],
  ['src' => './img/mad/mart046.jpg', 'titre' => 'Ponton à Sainte-Anne'],
  ['src' => './img/mad/mart047.jpg', 'titre' => 'Vert sur vert'],
  ['src' => './img/mad/mart048.jpg', 'titre' => 'Coucher de soleil'],
];

Les images ont une largeur de 630px, sauf quelques unes qui sont plus étroites (420px).
J'aimerais ajuster le bandeau du libellé à la taille de chaque photo.
Pour l'instant j'utilise width: float;
Mais j'aurais mieux aimé width: 100%;

Encore merci pour l'aide
Messages postés
28930
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
29 mai 2020
2 467
Je déplace donc ta question dans le forum css