Bootstrap Images

Objectifs

Dans ce tutoriel, nous aborderons trois classes Bootstrap 3 pour mettre en forme les images. Nous verrons également ce que Bootstrap 3 propose pour les images responsives.

Styles généraux

Avant de discuter des classes spéciales que Bootstrap 3 fournit pour styliser les images, nous allons examiner les styles généraux que Bootstrap 3 fournit pour définir les images.

img {
  border: 0;
}

Il s'agit de la première règle CSS pour les images trouvée dans le CSS de Bootstrap 3, utilisée pour supprimer les bordures lorsque les images sont rendues.

Ensuite, dans la requête média d'impression, ces règles sont spécifiées.

 img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }

page-break-inside: avoid;Éviter les sauts de page à l'intérieur des images.

max-width: 100% !important;Les styles définis pour les images sont évidents. Ici, elle est utilisée pour garantir que même si la largeur de l'image dépasse le conteneur, elle peut être contrainte à s'afficher à l'intérieur du conteneur. Elle est combinée avec!importantutilisées ensemble pour outrepasser tous les autres styles qui brisent ce style. Parfois, les développeurs veulent des styles pour mieux prendre en charge la présentation conviviale des images sur les appareils mobiles, ils utiliseront donc spécifiquement ces deux règles.

Voici une autre règle pour les images

img {
  vertical-align: middle;
}

En raison de cette règle, une image sera centrée verticalement dans un div ou un autre élément. Comme le montre l'exemple ci-dessous.

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Exemple de rendu d'image Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
        .mdl {
            background-color: silver;
            padding: 7px
        }
    </style>


    
</head>
<body>
<p class="mdl"><img src="icon-default-screenshot.png.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<script src="https://code.jquery.com/jquery.js"></script>

<script src="dist/js/bootstrap.min.js.html"></script>
</body>
</html>

Cliquez ici pour voir la démo en ligne

Veuillez noter que si vous devez centrer verticalement les images selon le contexte, vous aurez besoin de styles supplémentaires.

Styles spéciaux

Bootstrap 3 fournit trois classes pour afficher des images avec des styles spécifiques.

img-rounded

Vous pouvez utiliser cette classe pour afficher des images avec des coins arrondis. Pour ce faire, Bootstrap fournit la classeimg-rounded. Les styles de cette classe sont définis comme suit

.img-rounded {
  border-radius: 6px;
}

Par conséquent, il définit la propriétéborder-radiussur une valeur de 6 pixels pour définir les coins arrondis de l'image correspondante. L'exemple ci-dessous présente deux images identiques, la première sans la classeimg-rounded, et la seconde avecimg-roundedclasse. Veuillez noter que la deuxième image est arrondie. Vous pouvezcliquer ici pour voir l'exemple en ligne。

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Exemple Bootstrap 3 d'affichage d'images avec des coins arrondis</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
    </style>


    
</head>
<body>
<img src="rounded-corner-images.png.html" alt="image avec des coins arrondis">
<img src="rounded-corner-images.png.html" alt="image avec des coins arrondis" class="img-rounded">

<script src="https://code.jquery.com/jquery.js"></script>

<script src="dist/js/bootstrap.min.js.html"></script>
</body>
</html>

img-thumbnail

Ceci est une autre classe CSS Bootstrap 3 qui ajoute une vignette à une image. Le code de cette classe est affiché ci-dessous

.img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

Ci-dessous un exemple utilisant cette classe. Vous pouvezCliquez ici pour voir la démo en ligne。

two images without and with img-thumbnail

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3 Vignettes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
    </style>


    
</head>
<body>
<img src="image-with-thumbnail.png.html" alt="image sans coins de vignette">
<img src="image-with-thumbnail.png.html" alt="image avec coins de vignette" class="img-thumbnail">

<script src="https://code.jquery.com/jquery.js"></script>

<script src="dist/js/bootstrap.min.js.html"></script>
</body>
</html>

img-circle

En utilisant la propriété border-radius, Bootstrap 3 crée une image qui s'affiche sous une forme circulaire.img-circleLe code CSS de la classe est le suivant :

.img-circle {
  border-radius: 50%;
}

Cliquez ici pour voir l'exemple en ligne.. Ci-dessous se trouvent la capture d'écran et le code.

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Image circulaire Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
    </style>


    
</head>
<body>
<img src="image-with-circle.png.html" alt="image sans forme circulaire">
<img src="image-with-circle.png.html" alt="image avec forme circulaire" class="img-circle">

<script src="https://code.jquery.com/jquery.js"></script>

<script src="dist/js/bootstrap.min.js.html"></script>
</body>
</html>

Images responsives

Bootstrap 3 ne fournit pas d'images réactives par défaut.. Vous devez ajouterimg-responsiveclasse à l'image pour la rendre réactive. Le code CSS pour cette classe est le suivant.

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

Il définit que l'image doit être affichée comme un élément de niveau bloc, la hauteur sera la même que la hauteur de l'image, et la largeur maximale est de 100%, pour contraindre l'image à s'afficher en fonction de l'appareil sur lequel elle se trouve.

Si vous voulez que les images soient réactives par défaut, vous pouvez ajouter ces règles CSS àimg{ }。

Un exemple d'utilisation de la classe est ci-dessous. Vous pouvezCliquez ici pour voir la démo en ligne.。

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Images réactives Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
        img {
            margin-bottom:30px
        }
    </style>


    
</head>
<body>
<img src="image-with-circle.png.html" alt="sans fonctionnalité d'image réactive">
<img src="image-with-circle.png.html" alt="avec fonctionnalité d'image réactive" class="img-responsive">

<script src="https://code.jquery.com/jquery.js"></script>

<script src="dist/js/bootstrap.min.js.html"></script>
</body>
</html>

Cette méthode pour ajouter des capacités responsives aux images a des limites.

Respectivement sur les appareils à grand écran et les appareils mobiles (qui ont des écrans plus petits, peuvent causer desproblèmes de performance) le chargement de la même grande image haute résolution.Problème de direction artistique.

Les développeurs ont trouvé des solutions pour surmonter ces limitations. Nous allons voir unMarc GrabanskietChristopher SchmittutiliserHiSRCexemple. C'est un plugin jQuery qui crée automatiquement des versions basse, moyenne et haute résolution d'une image, et la version présentée dépend de la résolution et de la bande passante de l'appareil qui affiche l'image.

Dans notre prochaintutoriel sur les images responsives, nous discuterons de toutes ces méthodes en détail.

Cliquez ici pour voir la démo en ligne.. Le code est le suivant :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Exemple d'image responsive avec Bootstrap 3 utilisant HiSRC</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
        img {
            margin-bottom:30px
        }
    </style>


    
</head>
<body>
<img src="5216852563_eca0af1b0d_m.jpg.html" data-1x="5216852563_eca0af1b0d.jpg" data-2x="5216852563_90c3f9c402_o.jpg" class="hisrc" />

<script src="https://code.jquery.com/jquery.js"></script>

<script src="dist/js/bootstrap.min.js.html"></script>
<script>
    $(document).ready(function(){
        $(".hisrc").hisrc();
    });
</script>
<p>Crédit photo : /http://www.flickr.com/photos/cubagallery/</p>
</body>
</html>

Autres extensions

Bootstrap CSS

Bootstrap Composants de mise en page

Bootstrap Plugin

Bootstrap Autres

Bootstrap Images

Objectifs

Styles généraux

Exemple

Styles spéciaux

img-rounded

Exemple

img-thumbnail

Exemple

img-circle

Exemple

Images responsives

Exemple

Exemple