_images.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. // Responsive images (ensure images don't scale beyond their parents)
  2. //
  3. // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
  4. // We previously tried the "images are responsive by default" approach in Bootstrap v2,
  5. // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
  6. // which weren't expecting the images within themselves to be involuntarily resized.
  7. // See also https://github.com/twbs/bootstrap/issues/18178
  8. .img-fluid {
  9. @include img-fluid();
  10. }
  11. // Rounded corners
  12. .img-rounded {
  13. @include border-radius($border-radius-lg);
  14. }
  15. // Image thumbnails
  16. .img-thumbnail {
  17. padding: $thumbnail-padding;
  18. line-height: $line-height;
  19. background-color: $thumbnail-bg;
  20. border: $thumbnail-border-width solid $thumbnail-border-color;
  21. border-radius: $thumbnail-border-radius;
  22. transition: all .2s ease-in-out;
  23. @include box-shadow(0 1px 2px rgba(0,0,0,.075));
  24. // Keep them at most 100% wide
  25. @include img-fluid(inline-block);
  26. }
  27. // Perfect circle
  28. .img-circle {
  29. border-radius: 50%;
  30. }
  31. //
  32. // Figures
  33. //
  34. .figure {
  35. // Ensures the caption's text aligns with the image.
  36. display: inline-block;
  37. }
  38. .figure-img {
  39. margin-bottom: ($spacer-y / 2);
  40. line-height: 1;
  41. }
  42. .figure-caption {
  43. font-size: 90%;
  44. color: $gray-light;
  45. }