html - Zurb-Foundation CSS 剪辑属性

Question

当它在页面上呈现时，我想从 CMS 剪辑一个 img 元素，这样，无论原始图像的 XY 尺寸比例如何，它看起来都与同一页面上的其他按钮相同。问题是当我使用以下代码构建它时，Foundation 网格在智能手机和其他移动设备上中断。有什么建议吗？

.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

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

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

此外，我还想问另外两个问题:

• 您为什么不使用 CSS 来设计按钮的样式？和/或...
• 为什么不让 CMS 为您调整图片大小？