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

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

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