_elements.images.scss 1011 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. /* ==========================================================================
  2. #IMAGES
  3. ========================================================================== */
  4. /**
  5. * 1. Fluid images for responsive purposes.
  6. * 2. Offset `alt` text from surrounding copy.
  7. * 3. Setting `vertical-align` removes the whitespace that appears under `img`
  8. * elements when they are dropped into a page as-is. Safer alternative to
  9. * using `display: block;`.
  10. */
  11. img {
  12. max-width: 100%; /* [1] */
  13. font-style: italic; /* [2] */
  14. vertical-align: middle; /* [3] */
  15. }
  16. // In case you don't have control over generated `width` and `height` attributes
  17. // on `<img>` elements in your markup, but still want the images to be fluid,
  18. // set this to `false`.
  19. $inuit-static-images: true !default;
  20. @if ($inuit-static-images == true) {
  21. /**
  22. * If a `width` and/or `height` attribute has been explicitly defined, let’s
  23. * not make the image fluid.
  24. */
  25. img[width],
  26. img[height] {
  27. max-width: none;
  28. }
  29. }