如何使用剪辑只显示图像的顶部200px？ [英] How to use clip to only show the top 200px of an image?

问题描述

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

I am dealing with Facebook profile images, and their height can vary a lot in size. I am trying to use the clip CSS property to only get a maximum of 200px of the image. Here is what my CSS looks like:

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

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

以下是实际的HTML：

Here is the actual HTML:

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

没有图像显示。它没有剪辑，但我只想要图像的顶部200px。
Thanks！

No image is being displayed. It works without the clip, but I only want the top 200px of an image. Thanks!

推荐答案

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

它可以在更多浏览器上运行比剪辑。

It'll work on more browsers than clip.

这篇关于如何使用剪辑只显示图像的顶部200px？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！