如果位置绝对，如何将溢出设置为隐藏在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);
}