Images

Formes

Utilisez-les pour facilement modifier la forme de <img> (image) sans avoir à utiliser le logiciel d'édition.

Par défaut :

Arrondi :

Circle :

Thumbnail (hyperlinked) :

Code

Par défaut :

<img src="https://dummyimage.com/250x250" alt="" />

Arrondi :

<img src="https://dummyimage.com/250x250" class="img-rounded" alt="" />

Cercle :

<img src="https://dummyimage.com/250x250" class="img-circle" alt="" />

Miniature (en hyperlien) :

<a href="#"><img src="https://dummyimage.com/250x250" class="img-thumbnail" alt="" /></a>

Images réactives

Utilisez-les pour agrandir l'échelle des images de façon appropriée et ne dépassez jamais la largeur du conteneur parent. Avec les images réactives, max-width: 100%; et height: auto; sont appliqués automatiquement à l'aide de .img-responsive.

Image trop grande pour l'espace disponible :

La même image est maintenant réactive et entre dans le conteneur parent:

Code

<img src="https://dummyimage.com/400x100" class="img-responsive" alt="Un espace générique pour une image">

Étirement des images

Utilisez pour étirer une plus petite image à la largeur du conteneur. Assurez-vous que l'image est toujours claire et facile à voir dans les résolutions plus grandes.

L'image (100x25) est trop petite et brouillée:

L'image (200x50) est toujours trop petite pour l'espace:

L'image étirée (100x25) est floue:

L'image étirée et claire (200x50) entre dans l'espace:

Code

<img src="https://dummyimage.com/200x50" class="full-width" alt="Un espace générique pour une image">

Pavés de miniatures

Utilisez pour ajouter toute sorte de contenu tel que les en-têtes, les paragraphes ou les boutons dans une miniature afin de créer un effet de pavé de miniatures.

Titre (légende)

Titre (légende)

• Lien
• Lien

Source code

<section class="thumbnail"><a href="#"><img src="https://dummyimage.com/350x200" alt="Un espace générique pour une image"></a>
	<div class="caption">
		<h3>Titre (légende) </h3>
		<p>Titre (légende)</p>
		<ul class="list-inline">
			<li><a href="#">Lien</a></li>
			<li><a href="#">Lien</a></li>
		</ul>
	</div>
</section>

Usages médias

Utilisez-les pour ajouter une couche de texte et d'images pour le contenu média tel que les commentaires de blogue, les gazouillis et ainsi de suite.

Par défaut  :

En-tête du média

Contenu, image tirée vers la gauche

En-tête du média

Contenu, image tirée vers la droite

Comme des listes :

• 

  En-tête

  Contenu, image tirée vers la gauche

• 

  En-tête

  Contenu, image tirée vers la gauche

• 

  En-tête

  Contenu, image tirée vers la droite

• 

  En-tête

  Contenu, image tirée vers la droite.

Code

<div class="row">
	<div class="col-md-4">
		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Par défaut&nbsp; :</h3>
				<section class="media"> <a class="pull-left" href="#">
					<img class="media-object" src="https://dummyimage.com/64x64" alt="Un espace générique pour une image"> </a>
					<div class="media-body">
						<h4 class="media-heading">En-tête du média</h4>
						<p>Contenu, image tirée vers la gauche</p>
					</div>
				</section>
				<section class="media mrgn-tp-xl"> <a class="pull-right" href="#">
					<img class="media-object" src="https://dummyimage.com/64x64" alt="Un espace générique pour une image"> </a>
					<div class="media-body">
						<h4 class="media-heading">En-tête du média</h4>
						<p>Contenu, image tirée vers la droite</p>
					</div>
				</section>
				<h3 class="mrgn-tp-xl">Comme des listes :</h3>
				<ul class="media-list">
					<li class="media"> <a class="pull-left" href="#">
						<img class="media-object" src="https://dummyimage.com/64x64" alt="Un espace générique pour une image"> </a>
						<div class="media-body">
							<h4 class="media-heading">En-tête</h4>
							<p>Contenu, image tirée vers la gauche</p>
						</div>
					</li>
					<li class="media"> <a class="pull-left" href="#">
						<img class="media-object" src="https://dummyimage.com/64x64" alt="Un espace générique pour une image"> </a>
						<div class="media-body">
							<h4 class="media-heading">En-tête</h4>
							<p>Contenu, image tirée vers la gauche</p>
						</div>
					</li>
				</ul>
				<ul class="media-list mrgn-tp-xl">
					<li class="media"> <a class="pull-right" href="#"> <img class="media-object" src="https://dummyimage.com/64x64" alt="Un espace générique pour une image"> </a>
						<div class="media-body">
							<h4 class="media-heading">En-tête</h4>
							<p>Contenu, image tirée vers la droite </p>
						</div>
					</li>
					<li class="media"> <a class="pull-right" href="#"> <img class="media-object" src="https://dummyimage.com/64x64" alt="Un espace générique pour une image"> </a>
						<div class="media-body">
							<h4 class="media-heading">En-tête</h4>
							<p>Contenu, image tirée vers la droite.</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>