How to stretch image to full height of page in bootstrap col? - css

Question

I'm trying to create a login page like this:
What I created so far looks like this:
With this code:
<div class="control-section" style="max-width: 100% !important;">
<div class="row" style="height:100%;">
<div class="col-md-4" style="height: 100% !important; padding-top: 25px !important;">
<section>
<form id="account" method="post">
<h4>LOGIN </h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
<div class="form-group">
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</form>
</section>
</div>
<div class="col-md-8" style="max-width: 100% !important; height: 100% !important;">
<img src="~/Resources/placeholderimage.png" />
</div>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
<style>
.container {
max-width: 100% !important;
height: 100% !important;
}
.col-md-4 {
height: 100%;
display: table-row;
}
.col-md-8 {
height: 100%;
display: table-row;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
</style>
As u can see theres an empty white space at the bottom of the page even though I resized my image to huge dimensions, somehow it does not fit to the 100% of my page. How can I set the static height of 100% to my image? Hope someone can help.
Thanks

Answer 1

You can use 100vh instead of 100% on your img or col-md-8.
Possibly the image does not stretch the full width of col-md-8 in which case you can:
img {
width: 100%;
height: 100%;
object-fit: cover; /* cover makes the image stretch the width and height of the container */
}
And you can also make sure the col-md-8 takes up 100% of the height like this.
col-md-8 {
max-width: 100%;
height: 100vh;
}
Add CSS Media Query to change image fit on screens below 993px
#media and screen(max-width: 992px {
img{
object-fit: contain;
}
}

Answer 2

Although I would advise against it, if you must change the height of the element without changing the size of the parent, you should probably set the height: 100vh
Obviously since the viewport height is not calculated properly or as expected on mobile you should probably try to calculate the height of the window.innerHeight on window.addEventListener('load') and on window.addEventListener('resize') using something like this:
const vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
window.addEventListener('resize', () => {
const vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
})
Then applying it to your element as so: height: calc(var(--vh, 100vh) * 100)
Obviously a simpler solution would be using height: 100% and you would avoid any possible overflow.

Answer 3

Try this:-
Remove height from row and columns and give this class in row m-0
<div class="col-md-8" !important;">
<class ="bk-one-more-div"style="width: 100%!important; height: 500px>
<img src="~/Resources/placeholderimage.png" class="img-fluid w-
100">
<div/>
</div>