frontend auto crop on foundation profiles

[bwakad]

I know ...some people will say this is css and off topic, but much more use foundation and this can help in building profiles.

A nice technique to use in foundation profiles for front end auto crop images. Here I have used the data equalizer, but that is totally up to you.

All you need to do is change the height for disfferent screen size queries:

// template:

<div class='small-4 columns image' data-equalizer-watch>
     <a class='th th-item' href='{$page->url}' style='background-image:url($thumb->url)'>
            <img class='transparent' src='{$thumb->url}'/>
     </a>
</div>

// CSS ->    .th is the default markup of foundation for thumbs (border and hover)

.transparent{ opacity: 0; }
.th-item{
    height: 11em; // example, change for convinience
    width: 100%;
    overflow: hidden;
    background-position: center;
}

- edit - although a nice trick, they say it's bad to do this by css...