html - 如果它的位置是绝对的，如何将溢出设置为隐藏在 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 属性，该属性将裁剪绝对定位的元素。指定的参数是要裁剪到的矩形的顶部、右侧、底部和左侧坐标。

以下示例代码会将您的图像裁剪为 60 像素宽和 200 像素高:

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