集中溢出：active

Question

我想在用户单击图像时显示更大版本的图像（嵌入

figure

标签中），以便图像在两侧均匀地溢出其容器。这是我尝试过的：

figure {
    display: block;
    height: auto;
    max-width: 90%;
    margin: 1rem auto 1rem auto;
    &:active {
        max-width: calc(100% + 5rem);
        margin-left: -5rem;
    }
}

按照预期，图像向左移动了 5rem，但大小保持不变。但是，如果我减小

&:active

选择器的大小（例如

calc(100% - 5rem);

），则单击时图像会变小。我在这里缺少什么？

Answer 1

我假设您需要为图像设置 100% 的宽度，因为您只是更改框架的大小。

figure {
    display: block;
    height: auto;
    max-width: 90%;
    margin: 1rem auto 1rem auto;
    &:active {
        max-width: calc(100% + 5rem);
        margin-left: -5rem;
    }
    img {
        width:100%;
        max-width:100%;
    }
}

如果这不起作用，请检查您的图像是否足够大，可以在不拉伸的情况下扩展。

Answer 2

在 RichardB 在上述答案中的帮助下，我想出了以下解决方案：

figure {
    display: block;
    height: auto;
    max-width: 90%;
    margin: 1rem auto 1rem auto;
    &:active {
        max-width: 150%;
        margin: 1rem -5rem 1rem -5rem;
    }
    & img {
        width: 100%;
        max-width: 100%;
        margin: 0rem auto 0rem auto;
    }
}

虽然我的

calc()

方法显然太聪明了，但两侧相同的负边距可以根据需要提供放大且居中的图像。