Ajuter le libellé à la taille d'une image en CSS
Fermé
chabinot
Messages postés
322
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
27 août 2024
-
16 mai 2020 à 15:28
jordane45 Messages postés 38268 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 novembre 2024 - 17 mai 2020 à 16:32
jordane45 Messages postés 38268 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 novembre 2024 - 17 mai 2020 à 16:32
A voir également:
- Ajuter le libellé à la taille d'une image en CSS
- Comment réduire la taille d'un fichier - Guide
- Gmail libellé automatique - Guide
- Comment reduire la taille d'une photo - Guide
- Image iso - Guide
- Comment agrandir une image - Guide
2 réponses
jordane45
Messages postés
38268
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 novembre 2024
4 694
17 mai 2020 à 10:10
17 mai 2020 à 10:10
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.....
chabinot
Messages postés
322
Date d'inscription
mardi 10 novembre 2015
Statut
Membre
Dernière intervention
27 août 2024
16
Modifié le 17 mai 2020 à 14:48
Modifié le 17 mai 2020 à 14:48
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
jordane45
Messages postés
38268
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 novembre 2024
4 694
17 mai 2020 à 16:32
17 mai 2020 à 16:32
Je déplace donc ta question dans le forum css