显示图像的一部分？答案

【问题标题】：Showing part of an image?显示图像的一部分？
【发布时间】：2018-03-02 17:06:20
【问题描述】：

我正在尝试显示半张图片，具体来说是顶部。

我在尝试执行此操作时遇到了一些问题。

当试图剪辑它消失的图像时？我正在使用 Bulma CSSframework，但它似乎不允许我显示一半的图像？它在布尔玛以外工作正常。

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

<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>

【问题讨论】：

stackoverflow.com/questions/49052180/…
链接一个死问题有什么意义？
你尝试过纯 CSS 吗？这很容易做到

标签： html css bulma

【解决方案1】：

clip 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（以及最近的clip-path）仅仅定义了一个剪辑路径，它不会改变被剪辑元素的宽度/高度。

虽然您可以通过以下解决方法实现您的目标

.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>

【讨论】：

这仍然会占用完整图像所占用的空间，这不是我想要的。
@burido 你想剪掉它并把下半部分留空吗？
不是空白，只占图片显示部分的空间。

【解决方案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>

【讨论】：