我的图像全屏显示。在使用引导程序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块-对我没有任何帮助。
请帮忙。
我假设您必须使用此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的背景，其大小为Cover：
.crop {
background: transparent url(...) center center no-repeat;
background-size: cover;
}
这将用图像填充可用空间并将其居中。这意味着对于较小的屏幕，图像也将较小，请始终确保其覆盖整个容器（在这种情况下为.crop）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句