Question

我希望能够在水平对齐的全屏图像中水平滚动，我尝试使用float，display：inline-block和其他解决方案，但这些解决方案都不适合我。而不是水平对齐我的图像垂直堆叠

<body>
    <div class="wrap">
        <div class="img">
            <img src="./assets/img1.jpeg" alt="img1">
        </div>
        <div class="img">
            <img src="./assets/img2.jpeg" alt="img2">
        </div>
        <div class="img">
            <img src="./assets/img3.jpeg" alt="img3">
        </div>
    </div>
</body>

body,
.wrap,
    {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.wrap img {
    display: inline-block;
    height: 100vh;
    width: 100vw;
}

Answer 1

尝试使用柔性此解决方案：

.wrap {
  width: 500%;
  display: flex;
  flex-wrap: wrap;
}

Answer 2

在您的代码中使用此CSS

tf.keras

这将解决您的问题。

如何水平对齐全屏图像？

2 个答案: