如果其位置是绝对的，如何将溢出设置为隐藏在img标记上

Question

在我的HTML中，我有以下

<article class="innovate">
    <img src="img/entrepreneur-593358.jpg" />
    <h1>We Innovate</h1>
</article>

及其CSS

.innovate {
    position: relative;
    margin-top: -140px;
    text-align: center;
    color: #fff;
}

    .innovate img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        height: 100vw;
        overflow: hidden;
    }

    .innovate h1 {
        padding-top: 230px;
        font-size: 80px;
    }

我尝试了一些使溢出的东西：隐藏在img标签中的工作 但由于某种原因，它没有。有什么建议吗？

Answer 1

如果您尝试以编程方式裁剪图像，我建议使用CSS clip属性，该属性将剪切绝对定位的元素。指定的参数是要剪切到的矩形的顶部，右侧，底部和左侧坐标。

以下示例代码会将您的图片裁剪为60px宽和200px高：

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}