Question

我的图像全屏显示。在使用引导程序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块-对我没有任何帮助。

请帮助。

Answer 1

我将假设您必须使用此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）。

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

1 个答案: