Zurb-基金会CSS剪辑属性

Question

我想剪辑一个img元素时，从CMS在页面上呈现，以便，无论XY尺寸的比例，原始图像，它看上去与相同页面上的其他按钮相同。问题是，当我用下面的代码构建它时，基金会的网格会在智能手机和其他移动设备上崩溃。有什么建议吗？

.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

带有clipsquare图像的div上的.one.columns类不是正确的基类。在标准的12列布局中，您将执行以下操作：

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

此外，我还要问另外两个问题：

• 为什么不使用CSS来调整按钮的样式呢？和/或..。
• 为什么你不让你的CMS为你调整你的图像大小？

Answer 2

clip已经被否决了。做同样的事情甚至更多的新属性称为clip-path。不过，这几乎没有什么问题，

• AFAIK rect()也不能工作。您需要使用inset()。
• 维度需要用空格而不是逗号来分隔(,)。
• Webkit需要前缀，不需要定位。

例如，

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

有关此主题的更多信息，请参阅这篇关于CSS技巧，http://css-tricks.com/clipping-masking-css/的优秀文章。