Zurb-Foundation CSS clip property

Question

I want to clip an img element from a CMS when it renders on the page so that, no matter the proportion of the XY dimensions of the original image, it looks the same as other buttons on the same page. The problem is when I build it with the following code, the Foundation grid breaks on smart phones and other mobile devices. Any suggestions?

.clipsquare {  
     overflow: hidden;
     clip: rect(0px,60px,60px,0px); 
     position: absolute;
 } 


<div class="one columns"> 
     <a class="th" href="http://my-url">
       <div class="clipsquare"><img src="myImage.jpg" alt="title" width="90"></a></div> 
     </a>
</div>

Answer 1

class .one.columns on your div with the clipsquare image isn't correct foundation classes. In a standard 12 column layout you would do the following:

<div class="row">
<div class="large-12 columns">
    <!-- Column content here -->
</div>
</div>

Further, there are two other questions I'd ask here:

• Why aren't you using CSS to style your buttons? and/or...
• Why aren't you letting your CMS resize your images for you?

Answer 2

clip has been deprecated. The new property that does the same thing and even more is called clip-path . It has few gotchas though,

• AFAIK rect() doesn't work either. You need to use inset() .
• Dimensions need to be separated by space and not commas( , ).
• Webkit needs a prefix and positioning is not required.

Example,

.clipsquare {  
     overflow: hidden;
     -webkit-clip-path: inset(0 60px 60px 0);
             clip-path: inset(0 60px 60px 0);
} 

For more information, on this topic, refer this excellent article on CSS Tricks, http://css-tricks.com/clipping-masking-css/