我的布局看起来像 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;
}
}
}
}
}
最佳答案
您应该将 overflow: hidden; 添加到 .index-square 样式定义中；
.index-square {
flex-basis: 50%;
display: flex;
flex-flow: column;
overflow: hidden; /*Add this here*/
查看此 fiddle .
关于css - 在 flexbox 布局中缩放背景图像而不影响相邻元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46696975/