Question

简而言之，我已经使用swiper.js（垂直）库构建了一个滑块，问题是它始终使背景为红色的滑块块居中。由于变换比例属性，其高度增加，并且页边距也未按预期工作。中心滑块就像叠加到上一张和下一张幻灯片中一样。

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

.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

似乎您希望滑块元素在缩放时不超过父<div>。我可以建议通过以下四个想法实现这一目标：

使用CSS Flexbox整理滑块并轻松地将其垂直和水平居中。
在滑块的样式中添加box-sizing: border-box;，以确保在计算滑块的大小时考虑到边框。
根据要应用于它们的缩放比例将百分比宽度分配给滑块，以使它们在缩放时不超过父级的大小。我建议采用（1 /比例因子）的下限值。在这种情况下：floor(1 / 1.1) = 90。
仅在X轴上按比例缩放，以避免滑块元素重叠。

这是它的外观（我添加了父边框以使其更容易看到）：

.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>

变换比例元素间距问题

1 个答案: