Images

ll of the images on Furatto already have a predefined styling, just for a bette rendering. We would not want to ruin our awesome photos.

Building the markup

You don't have to add extra classes for the images, Yei!, simple invoke an img element.

  
  <img src="http://placehold.it/200x200" alt="" />
  

Images variations

We have provided three image variations for you to try on. The class names are .circular, .radius and .polaroid.

     
<img src="http://placehold.it/200x200" alt="" class="circular" />
<img src="http://placehold.it/200x200" alt="" class="rounded" />
<img src="http://placehold.it/200x200" alt="" class="polaroid" /> 
     
   

IE support

We use compass to support the majority of browsers, IE 8 and down does not support rounded corners. So .radius and .circular class names would not render properly.

iOS devices

There is an issue with circular and polaroid versions on iOS devices, and the easiest workaround to solve this is by warpping the img element into a div with an .img-frame class name.

Then you just have to append the modifier class to this div element instead of the img itself. This is shown below.

     
<div class="img-frame circular">
  <img src="http://placehold.it/200x200" alt="" />
</div>
     
   

Responsive images

We don't want to make images responsive by default, as is not always the desired behavior, so we are letting that to you. To achieve responsive images we just add a max-width: 100% and height: auto. This way the image will scale nicely to the parent element.

  
  <img src="http://placehold.it/200x200" class="responsive" />
  

Available sass variables

To customize the img element to meet your needs, you just have to simply change the corresponding Sass variables.

  
//Images variations
$img-radius: px-to-rems(3) !default;
$img-round: 50rem !default;

//Image general settings
$img-polaroid-padding: 0.28571429rem !default;
$img-polaroid-background: #FFF !default;
$img-polaroid-border-width: 0.07142857rem !default;
$img-polaroid-border-style: solid !default;
$img-polaroid-border-color: rgba(#000, 0.2) !default;
$img-display: inline-block !default;
$img-frame-margin: 5px !default;

//Experimental
$include-img-experimental: true !default;
$include-img-flexible-ratios: true !default;
  

Experimental

This experimental feature builds responsive cover images with different aspect ratios, which you can see below. Remember just because looks good on your last updated browser, does not mean it will work nice everywhere. To see it i action, just resize your browser window.

  
  <div class="cover-image ratio-2by1" style="background-image:url(http://placehold.it/1000x1000)"></div>
  

A thought on ratios

We have provided 4 different aspect ratios for you to try:

• .ratio-2by1
• .ratio-3by1
• .ratio-4by1
• .ratio-4by3

How cover image is built?

  
//Experimental
// Kudos to Nicolas Gallagher
@if($include-img-experimental) {
  .cover-image {
    display: block;
    overflow: hidden;
    position: relative;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto 1em;
    max-height: 300px;
    max-width: 100%;

    @if($include-img-flexible-ratios == false) {
      padding-bottom: 50%;
    }

    &:before {
      content: '';
      display: block;
      width:100%;
    }

    @if($include-img-flexible-ratios) {
      &.ratio-2by1:before {
        padding-bottom: 50%;
      }
      &.ratio-3by1:before {
        padding-bottom: 33.33%;
      }
      &.ratio-4by1:before {
        padding-bottom: 25%;
      }
      &.ratio-4by3:before {
        padding-bottom: 75%;
      }
    }

  }
}