如何将图像裁剪到div边框？

Question

我正在尝试将图像裁剪到 div 边框，如下图所示（最右侧的 div）：

网站图片

我尝试了以下方法：

div {
    /*Schedule to social media.*/
    grid-area: c;
    padding: 30px 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;

    img {
        height: 100%;
        margin-top: 10px;
        object-fit: cover;
        object-position: 0 0;
    }
}

它可以工作，但仅适用于父级作为 Flex 并带有一些填充，我不明白如何在不使用 Flex 的情况下正确执行此操作。有更好的方法吗？

Answer 1

我使用

overflow: hidden;

找到了更好的解决方案：

div {
    /*Schedule to social media.*/
    grid-area: c;
    padding: 30px 20px;
    overflow: hidden;
    img {
        height: 62%;
        margin-top: 10px;
    }
}