javascript - 转换缩放元素间距问题

Question

简单地说，我使用 swiper.js(垂直)库构建了一个 slider ，问题是它总是以背景为红色的 slider block 为中心。由于 transform scale 属性，它的高度增加并且边距也没有按预期工作。中心 slider 就像叠加到上一张和下一张幻灯片中。

请运行以下代码以进一步了解我。

.slider {
    display: block;
    background-color: blue;
    width: calc(100% - 50px);
    height: auto;
    margin: 5px 25px;
    padding: 20px;
    border-radius: 12px;
    color: #FFF;
}

.slider.active {
    background-color: red;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);1
}

<div class="swiper-container">
    <div class="slider">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="slider previous">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="slider active">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="slider next">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="slider">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Answer 1

您似乎希望 slider 元素不超过父元素 <div>当它们被缩放时。我可以建议用四个想法来实现这一点:

1. 使用 CSS Flexbox 组织您的 slider 并以简单的方式将它们垂直和水平居中。
2. 正在添加 box-sizing: border-box;调整 slider 的样式，以确保在计算 slider 大小时考虑到边框。
3. 根据您要应用的缩放比例为 slider 分配一个百分比宽度，以便它们在缩放时不会超过父级的大小。我建议采用 (1/比例因子) 的底值。在这种情况下:floor(1 / 1.1) = 90 .
4. 仅在 X 轴上放大以避免 slider 元素重叠。

这是它的样子(我添加了父边框以便于查看):

.swiper-container {
    width: 100%;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider {
    display: block;
    background-color: blue;
    width: 90%;
    height: auto;
    padding: 20px;
    margin: 5px 0px;
    border-radius: 12px;
    color: #FFF;
    box-sizing: border-box;
}

.slider.active {
    background-color: red;
    -webkit-transform: scale(1.1, 1);
    transform: scale(1.1, 1);
}

<div class="swiper-container">
    <div class="slider">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="slider previous">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="slider active">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="slider next">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="slider">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>