How to cut image corners to fit div using css?

Question

I want to crop image from all 4 sides to fit into div and get my desired result using scss? Here is my html:

<div class="my-auto mt-5 col-7 image-div">
  <img class="d-block mx-auto sheila-image" alt="" src="./assets/images/sheila.png">
</div>

Here is my scss code:

.image-div{
    background-color: $blue-color;
    transform: rotate(52deg) scale(1.1) translateY(-79px) translateX(-67px);
    .sheila-image{
        transform: rotate(-52deg) scale(1);
        height: 90%;
        width: 70%;
        object-fit: cover;
    }
}

This is output now:

And this is the desired output that I want:

Please help me how can I achieve this?

Add `overflow: hidden;` to the `.image-div` – Mr T Mar 02 '20 at 09:35 — Mr T, Mar 02 '20 at 09:35

score 4 · Accepted Answer · answered Mar 02 '20 at 09:37

Only you need to add overflow:hidden on .image-div

.image-div{
    overflow:hidden;
    background-color: $blue-color;
    transform: rotate(52deg) scale(1.1) translateY(-79px) translateX(-67px);
    .sheila-image{
        transform: rotate(-52deg) scale(1);
        height: 90%;
        width: 70%;
        object-fit: cover;
    }
}

<div class="my-auto mt-5 col-7 image-div">
  <img class="d-block mx-auto sheila-image" alt="" src="./assets/images/sheila.png">
</div>

How to cut image corners to fit div using css?

1 Answers1