html - 如何水平对齐全屏图像?

标签 html css

我希望能够水平滚动一些水平对齐的全屏图像。我尝试使用 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;
}

最佳答案

尝试将 flex 用于此解决方案:

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

关于html - 如何水平对齐全屏图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54403284/

相关文章:

jquery - 使正文内容透明,但内容中的 div 在页面加载时不透明

html - css滚动条的顶部和底部 Angular 没有改变

javascript - JQuery 中的自动检查单选按钮(根据另一个值将单选按钮标记为选中/未选中)

javascript - 为什么 Canvas 会留下幽灵般的光环?

javascript - Bootstrap 3 Collapse - 添加事件类以打开面板

CSS object fit cover 正在拉伸(stretch)图像

css - 使用 Twitter Bootstrap 自动 float

javascript - 如何重置输入类型 CSS

javascript - 动态添加/删除所需属性

css - 覆盖父样式