html - 如何使用剪辑只显示图像的前 200px？

Question

我正在处理 Facebook 个人资料图片，它们的高度可能相差很大。我正在尝试使用 clip 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> 

没有显示图像。它没有剪辑也能工作，但我只想要图像的前 200 像素。谢谢!

Answer 1

您的矩形没有宽度，所以您看不到任何东西。例如，为正确的维度指定一个值，您应该能够看到它:

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

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