Les bordures de l’image IMAGES:Bordures

La classe .img-thumbnail permet d’afficher une bordure fine et des coins arrondis à une image qui reste responsive :

<div class="row"> 
        <div class="col"> 
                <p>La même photo de Venise, avec une fine bordure :</p> 
                <img src="venise.jpg" class="img-thumbnail" 
alt="Un canal à Venise"> 
        </div> 
</div> 

Voici l’affichage obtenu sur un petit écran :

images/C05-003.png

Voici la règle CSS de la classe .img-thumbnail :

.img-thumbnail { 
        padding: .25rem; 
        background-color: #fff; 
        border: 1px solid #dee2e6; 
        border-radius: .25rem; 
        max-width: 100%; 
        height: auto; 
} 
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les images responsives
Suivant
Aligner les images