Image Bootstrap

cible

Dans ce tutoriel, nous allons discuter de trois classe Bootstrap 3 pour ajouter du style à des images. Nous allons également discuter de la Bootstrap 3 contenu de l'image en réponse fournie.

général style

Avant de discuter de la définition d'un style particulier de l'image de la classe Bootstrap 3 offres, nous allons voir les images de définition de style général Bootstrap 3 offre.

img {
  border: 0;
}

Ceci est la première image défini des règles CSS trouvés dans le CSS Bootstrap 3, lors du rendu de l'image utilisée pour supprimer la frontière.

Puis, dans les requêtes de la presse écrite, les dispositions de ces règles.

 img {
	page-break-inside: éviter;
  }
  img {
	! Max-width: 100% importante;
  }

page-break-inside: éviter, éviter les sauts de page dans l'image.

! Max-width: 100% importante ; le style défini d'image est évidente. Même lorsqu'il est utilisé pour déterminer la largeur de l'image au-delà du récipient, il peut aussi se limiter à l'affichage du conteneur. It! Important utilisé en conjonction avec d' autres styles pour couvrir tout dommage à ce style. Parfois, les développeurs veulent le style un meilleur support pour les appareils mobiles convivial rendu d'image, va utiliser ces deux règles spéciales.

Il y a aussi une autre règle pour l'image

img {
  vertical-align: middle;
}

En raison de cette règle, une image sera centrée verticalement dans la div ou d'autres éléments. Comme on le voit dans les exemples suivants.

S'il vous plaît noter que si vous avez besoin de centrer l'image verticalement en fonction du contexte, la nécessité de styles supplémentaires.

Le style particulier

Bootstrap 3 fournit l'image de trois de classe avec un style clair pour le rendu.

img-arrondie

Vous pouvez utiliser cette classe pour rendre une image avec des coins arrondis. Pour ce faire , Bootstrap fournit img-arrondi classe. La classe de style défini comme suit

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

Par conséquent, il est la propriété border-radius à 6 avec des valeurs de pixels utilisés pour définir l'image de filet concerné. L'exemple suivant montre deux de la même image, la première image sans img-arrondie classe, la seconde image avec la classe img-arrondie. A noter que la seconde image est arrondie. Vous pouvez cliquer ici pour voir les exemples en ligne .

img-thumbnail

Ceci est une autre Bootstrap classe CSS 3, qui ajoutent à l'image d'une vignette. Le code de classe est illustré 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: tout 0.2s facilité in-out;
		  transition: toutes les 0.2s facilité in-out;
}

Voici un exemple de cette classe de. Vous pouvez cliquer ici pour voir la démo en ligne .

img-cercle

En utilisant la propriété border-radius, Bootstrap 3 crée une image circulaire présentée. img-cercle code CSS de classe comme suit

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

Cliquez ici pour voir les exemples en ligne . Voici les captures d'écran et le code.

Image Responsive

Bootstrap 3 ne fournit pas d' images prêt-sensibles. Vous devez ajouter img sensible classe pour le rendre sensible à l'image. La classe de code CSS ci-dessous.

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

Il définit les images doivent être affichées en tant qu'élément de niveau bloc, la hauteur de la hauteur de l'image, la largeur maximale de l'image est de 100%, en fonction de l'image afin de limiter le dispositif auquel il est présenté.

Pour rendre l'image ayant une réponse par défaut, vous pouvez ajouter le code à la CSS img {}.

Exemples d'utilisation de cette classe comme suit. Vous pouvez cliquer ici pour voir la démo en ligne .

Ceci ajouté à la réponse d'image méthodes ont des limites.

Respectivement, dans le grand écran et les périphériques mobiles (plus petite taille de l' écran peut provoquer des problèmes de performance) chargés également de grandes images à haute résolution. Parce que le navigateur sera chargé avant CSS et JS images préchargées dans une des connexions réseau à faible vitesse, il peut aussi causer des problèmes de performance. Imaginez que vous avez une grande image et un objet spécifique à l' intérieur, lorsque vous affichez les images sur un appareil mobile, l'image sera réduite à une version plus petite de l'image paraîtra si petit, le problème évoqué à la direction artistique .

Les développeurs ont mis au point des solutions pour surmonter ces limitations. Nous allons voir un Marc Grabanski et Christopher Schmitt Exemple HiSRC de. Ceci est une image crée automatiquement un support, version basse, haute résolution de prise Jquery, selon la version présentée par la résolution d'affichage de l'image et la bande passante du dispositif.

Derrière nous l'image tutoriel sensibles, nous allons discuter de toutes ces méthodes en détail.

Cliquez ici pour voir la démo en ligne . Le code se présente comme suit: