CSS 过渡 flex-grow 时自动放大背景图片时出错

Question

在 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;
        }
    }

  }

单击 DIV 时，自动缩放背景图像。我需要删除缩放。谢谢。

我尝试更改背景大小和位置。但不起作用。

Answer 1

那么，您是否尝试将

background-size: cover;

添加到您的

.clicked

课程中但没有成功？ 您可以尝试使用替代值，例如 100% auto 到您的图像手风琴，例如：

background-size: 100% auto;

。