Ajuter le libellé à la taille d'une image en CSS
chabinot
Messages postés
322
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
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
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
A voir également:
- Ajuter le libellé à la taille d'une image en CSS
- Comment réduire la taille d'un fichier - Guide
- Reduire taille image - Guide
- Libellé gmail - Guide
- Légender une image - Guide
- Image iso - Guide
2 réponses
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.....
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)
Code css :
Pas de code JS, sinon celui de bootstrap.
Code PHP du tableau des images :
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
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