如何使用剪辑仅显示图像的前200px？

Question

我正在处理Facebook个人资料图片，他们的身高可能会有很大差异。 我试图使用剪辑CSS属性只获得最大200px的图像。这是我的CSS的样子：

.fixed {
  position: relative;
  padding: 10px;
  background-color: #555555;
}

.inner {
  position: absolute;
  clip: rect(0 0 200px 0);
}

这是实际的HTML：

<div class="fixed"> 
  <div class="inner">
    <img src="large.jpg">
  </div> 
</div> 

没有显示图像。它没有剪辑，但我只想要一个图像的前200px。 谢谢！

Answer 1

你的矩形没有宽度，所以你什么也看不见。例如，为正确的维度指定一个值，您应该能够看到它：

.inner {
  position: absolute;
  clip: rect(0px, 200px, 200px, 0px);
}

这些值有时会与定位值混淆 - 请考虑而不是基于您指定的像素值矩形边的位置 - 左侧为0，右侧为200，顶部为0 ，底部是200。

Answer 2

.inner {
  overflow:hidden; 
  max-height:200px
}

它适用于比clip更多的浏览器。