使用Bootstrap构建的登录页面4

Question

我有一个为我构建的登陆页面，这是一个相当简单的布局。但问题是Banner Photo正在淹没页面，我必须滚动才能看到已完成的页面。是否可以对HTML和/或CSS进行调整，以将横幅照片的高度降低约三分之一？

Answer 1

有很多不同的方法可以做到这一点。我只会告诉你一个，这应该完全符合你当前的页面和需求。

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 d-flex align-items-end overflow-hidden banner-image-container">
    <img class="img-responsive" src="img/top-banner.jpg" width="100%">
</div>

（在<style标记内：）

.overflow-hidden {
    overflow: hidden;
}

.banner-image-container {
    max-height: 400px;
}

我所做的是将图像周围的容器限制在最大高度400px。因为你的图像比那个大，所以我将overflow: hidden;添加到容器中，因此它将关闭图像的其余部分。现在你对图像的主要关注点就是建筑物。所以我确实用d-flex align-items-end将它一直移到了顶部。