Centering image in bootstrap after resize - html

Question

I have image which is full width of the screen.
I want to keep the image in the center of the screen after the screen is resized bz using bootstrap 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;
}
I have tried center-block, text-center on parent, mx-auto d-block - nothing worked for me.
Please help.

Answer 1

I'm going to assume you have to use this HTML. In this particular case, you need to use absolute positioning for the image, and use transforms to calculate the center. Here's the working snippet.
.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>
Another approach is to set the image as a background of .crop, with a size of cover:
.crop {
background: transparent url(...) center center no-repeat;
background-size: cover;
}
This will fill up the available space with your image, and center it. This means that for smaller screens, the image will be smaller too, always making sure it covers the entire container (.crop in this case).