显示图像的一部分？

Question

我试图显示半个图像，顶部是具体的。

尝试这样做时，我遇到了一些问题。

当试图剪辑图像时，它会消失吗？我正在使用Bulma CSS框架，但它似乎不让我显示一半的图像？它在Bulma之外工作正常。

我已经尝试过其他问题的答案，它们只会导致图像消失。

<article class="media">
    <figure class="media-left">
        <p class="image"><img style="margin-top:-20px;position:absolute;clip:rect(0,73px,63px,0);" src="https://habboon.pw/habbo-imaging/avatarimage/figure?figure={{ auth::user()->look }}&gesture=sml&size=m"></p>
    </figure>
    <div class="media-content">
        <div class="content">
        </div>
    </div>
</article>

Answer 1

剪辑CSS属性定义元素的哪个部分可见。 clip属性仅适用于绝对定位的元素，即position：absolute或position：fixed的元素。

请注意，此功能已根据MDN弃用

此功能已从Web标准中删除。虽然有些浏览器可能仍然支持它，但它正在被删除。避免使用它并尽可能更新现有代码;请参阅本页底部的兼容性表，以指导您的决定。请注意，此功能可能随时停止运行。

相反，你可以使用clip-path

clip-path CSS属性创建一个剪切区域，用于定义应显示元素的哪个部分。更具体地，示出了区域内部的那些部分，而隐藏了外部的那些部分。

// clip-path: polygon(point1 [x,y], point2[x,y], point3[x,y],....pointN[x,y]);
// this creates a rect with full width and only half height
clip-path:  polygon(0 0, 100% 0, 100% 50%,0 50%);

请注意，此方法将“剪切”图像的下半部分，还有另一种方法可以让您保留完整图像并在适合您情况的情况下在下半部分放置覆盖图

---

更新

clip（以及更新的剪辑路径）仅定义剪切路径，它不会更改要剪切的元素的宽度/高度。

虽然你可以通过下面的一些解决方法来实现你的目标

.wrapper{
    width: 300px;
    
    /*Set the height = 1/2 of your image height*/
    height: 150px;
    
    /*clip-path is not needed now*/
    /*clip-path:  polygon(0 0, 100% 0, 100% 50%,0 50%);*/
    
    /*Instead you can use background-image with size set to cover*/
    background-image: url("https://placehold.it/300/100");
    background-size: cover;


  

}

<div class="wrapper">
</div>

Answer 2

img是p.image的孩子。类.image有规则position: relative。

我不知道为什么，但这导致了img显示的问题。您可以从容器中删除.image，也可以添加一个取代position: relative的自定义类。

fiddle

.clip-image {
  position: static !important;
}

img {
  margin-top: -20px;
  position: absolute;
  clip: rect(0, 73px, 63px, 0);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<article class="media">
    <figure class="media-left">
        <p class="image clip-image"><img src="https://unsplash.it/300"></p>
    </figure>
    <div class="media-content">
        <div class="content">
        </div>
    </div>
</article>