使用CSS仅选择图像的中间部分

Question

我有一个有一些CSS的图像: width:100%;

现在图像560px很高,但我希望只选择300px的图像,切断图像的顶部和底部而不会挤压它.

是否有可能做到这一点？

我已经看了crop但你必须选择要执行此操作的部分,因此在尝试获得中间时它将无法工作.

Answer 1

试试这个.这是使用"clip-path"CSS值.这在@Sam Jacob的帖子中提到过.

<style>
.clip-me {  
  position: absolute;
  clip: rect(110px, 160px, 170px, 60px); 
  /* values describe a top/left point and bottom/right point */

  clip-path: inset(10px 20px 30px 40px); /* or "none" */
  /* values are from-top, from-right, from-bottom, from-left */

} 
</style>
<img class="clip-me" src="thing-to-be-clipped.png">

注意:此CSS属性并没有在IE浏览器.