.img-fluid {
  display: block;
  max-width: 100%;
  height: auto;
  & > img {
    max-width: 100%;
  }
}

// Rounded corners
.img-rounded {
  @include border-radius($border-radius);
}

// Image thumbnails
.img-thumbnail {
  // Keep them at most 100% wide
  display: inline-block;
  max-width: 100%;
  height: auto;

  padding: $thumbnail-padding;
  transition: all .2s ease-in-out;
  border: $thumbnail-border-width solid $thumbnail-border-color;
  border-radius: $thumbnail-border-radius;
  background-color: $thumbnail-bg;
}

// Perfect circle
.img-circle {
  border-radius: 50%;
}

.img {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: center;
}

.img-mode {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.img-scale-to-fill {
  background-size: 100% 100%;
}

.img-aspect-fit {
  background-position: center center;
  background-size: contain;
}

.img-aspect-fill {
  background-position: center center;
  background-size: cover;
}

.img-width-fix {
  background-size: 100% auto;
}

.img-height-fix {
  background-size: auto 100%;
}

.img-top {
  background-position: center top;
}

.img-top-left {
  background-position: left top;
}

.img-top-right {
  background-position: right top;
}

.img-bottom {
  background-position: center bottom;
}

.img-bottom-left {
  background-position: left bottom;
}

.img-bottom-right {
  background-position: right bottom;
}

.img-center {
  background-position: center center;
}

.img-left {
  background-position: left center;
}

.img-right {
  background-position: right center;
}
