Question

我希望在页面上渲染时从CMS剪辑img元素，这样，无论原始图像的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

你的div上的.one.columns类和clipquare图像并不是正确的基础类。在标准的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/

Zurb-Foundation CSS剪辑属性

2 个答案: