CSS挑战：如何在Div容器内向上移动图片并实现裁剪效果？

我正在进行一项CSS挑战，目前在一个Div容器内有一张图片，需要将其向上移动，使图片的绿色部分上移并呈现出目标效果中的裁剪外观。当前效果与目标效果如图所示。

HTML代码 #

<div class="section-1">
    <div class="section-1-flex">
        <div class="description">
            <div class="description-container">
                <h1>Next generation digital banking</h1>
                <p>Take your financial life online. Your Easybank account will be a one-stop-shop for spending, saving, budgeting, investing, and much more</p>
                <button>Request Invite</button>
            </div>
        </div>
        <div class="images">
            <div class="images-container">
                <img src="static/images/bg-intro-desktop.svg">
            </div>
        </div>
    </div>
</div>

现有CSS代码 #

.images{
flex: 1;
}

.images-container{
    height: 700px;
    width: 1000px;
    float: right;
    overflow: hidden;
}

解决方案 #

要实现图片上移并裁剪出目标效果，只需给<img>元素添加向上的位移属性，结合容器的overflow: hidden即可裁剪掉下方多余部分。推荐使用transform属性，不会影响页面布局：

.images{
flex: 1;
}

.images-container{
    height: 700px;
    width: 1000px;
    float: right;
    overflow: hidden;
}

.images-container img {
    /* 调整数值以匹配目标效果，示例为向上移动150px */
    transform: translateY(-150px);
}

也可以使用margin-top实现同样效果，但transform在布局上更灵活：

.images-container img {
    margin-top: -150px;
}

根据实际图片尺寸和目标效果，调整位移的像素值即可让图片的绿色区域上移并呈现出裁剪后的外观。

内容的提问来源于stack exchange，提问作者HamTheMan