CSS Error automatic zoom in background image when transition flex-grow

Question

With this code in CSS:

.image-accordion{
    background-size: contain;
    flex-grow: 1;
    background-position: center center;
    margin-bottom: 2px;
    transition: flex-grow 0.7s ease-in-out;
    @include respond-to(large){
        height: 600px;
        margin-right: 4px;
    }
    &:last-child{
        margin-bottom: 0px;
        @include respond-to(large){
            margin-right: 0px;

        }
    }
    &.clicked{
        flex-grow: 2.8;
        @include respond-to(large){
            flex-grow: 4.57;
        }
    }

  }

When click in DIV apply automatic zoom in background image. I need to delete the zoom. Thanks.

I tried to change background-size and position. But not working.

Answer 1

so, did you try adding background-size: cover; to your .clicked class and didn't work? you can try to use instead cover, values like 100% auto to your image-accordion, like: background-size: 100% auto;.