Question

我有一个看起来像this的布局，我试图在悬停时缩放图像背景，但是我不能在不影响邻居元素的情况下以任何方式获得此效果（在悬停时它会扩展像this） - 我的目标是只缩放图像并保持在父div元素内。在flexbox布局中有没有解决方法？这是我的代码：

HTML：

<body>
<div class="index-wrapper">
    <nav class="index-menu">
        123
    </nav>
    <main class="index-main">
        <div class="index-square" style="background: yellow;"></div>
        <div class="index-square">
            <div class="index-square-inner" style="background-image: url(assets/img/is-2.jpg); background-position: center; background-size: cover;transition: all .2s ease-in-out;">
                <div style="background: rgba(0, 0, 0, 0.4);">
                    123
                </div>
            </div>
        </div>
        <div class="index-square" style="background: pink;">123</div>
        <div class="index-square" style="background: purple;">123</div>
    </main>
</div>
</body>

SCSS：

.index-wrapper {
  display: flex;
  flex-flow: column;
  height: 100vh;

  .index-menu {
    box-shadow: 0 0 2px 2px #d0d0d0;
    z-index: 2;
    background: white;
    color: black;
    padding: 2em;
  }

  .index-main {
    display: flex;
    background: yellow;
    flex-direction: row;
    flex: 1;
    flex-wrap: wrap;

    .index-square {
      flex-basis: 50%;
      display: flex;
      flex-flow: column;

      .index-square-inner {
        flex: 1;
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;

        &:hover {
          transform: scale(1.1);
        }

        div {
          flex: 1;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

Answer 1

您应该将overflow: hidden;添加到.index-square样式定义;

.index-square {
      flex-basis: 50%;
      display: flex;
      flex-flow: column;
       overflow: hidden; /*Add this here*/

请参阅此fiddle。

缩放flexbox布局中的背景图像，而不影响邻居元素

1 个答案: