调整大小后在引导程序中居中

时间:2018-07-20 20:03:14

标签: html css bootstrap-4

我的图像全屏显示。 在使用引导程序4调整屏幕大小后,我想将图像保留在屏幕中央。

<div class="crop text-center">
    <img src="pictures/home.jpg" class="home img-responsive" alt="Wedding bouquet">
</div>

.crop {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.home {
    min-height: 100vh;
    min-width: 100vw;
}

我尝试过中心块,父文本中心,mx-auto d块-对我没有任何帮助。

请帮助。

1 个答案:

答案 0 :(得分:0)

我将假设您必须使用此HTML。在这种情况下,您需要对图像使用绝对定位,并使用变换来计算中心。这是工作片段。

.crop {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.home {
    min-height: 100vh;
    min-width: 100vw;
    
    position: absolute; 
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
<div class="crop text-center">
    <img src="http://placekitten.com/1000/800" class="home img-responsive" alt="Wedding bouquet">
</div>

另一种方法是将图像设置为.crop的背景,并设置封面大小:

.crop {
   background: transparent url(...) center center no-repeat;
   background-size: cover;
}

这将用图像填充可用空间并将其居中。这意味着对于较小的屏幕,图像也将较小,请始终确保其覆盖整个容器(在这种情况下为.crop)。