Responsive Image

Type: Mixin

@include responsive-image();

* You can call mixins with or without gls- namespace (e.g. @include gls-responsive-image();).

Responsive Image Sass mixin helps you to make images responsive and change the default display CSS property value from inline to block in order to remove the extra space below them.

Github Source Code

Examples

Simply call the mixin in a selector that targets the <img> element itself.

img {
  @include responsive-image;
}

//CSS Output
img {
  display: block;
  width: 100%;
}