如何在 bootstrap col 中将图像拉伸到页面的全高？

Question

我正在尝试创建这样的登录页面：

到目前为止我创建的内容如下所示：

使用此代码：

<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>

如您所见，页面底部有一个空白 space，即使我将图像调整为巨大的尺寸，但不知何故它不适合我的页面的 100%。如何将图像的静态高度设置为 100%？希望有人能帮忙。

谢谢

Answer 1

试试这个：-

删除行和列的高度，并在第 m-0 行

中给出 class

<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>

Answer 2

您可以在 img 或 col-md-8 上使用 100vh 而不是 100%。

可能图像没有拉伸 col-md-8 的整个宽度，在这种情况下，您可以：

img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* cover makes the image stretch the width and height of the container */
}

你也可以确保 col-md-8 像这样占据 100% 的高度。

col-md-8 {
   max-width: 100%;
   height: 100vh;
}

添加 CSS 媒体查询以更改图像适合 993 像素以下的屏幕

@media and screen(max-width: 992px {
   img{
     object-fit: contain;
   }
}

Answer 3

虽然我不建议这样做，但如果您必须更改元素的高度而不更改父元素的大小，您应该设置 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)

显然，更简单的解决方案是使用 height: 100%，这样可以避免任何可能的溢出。

如何在 bootstrap col 中将图像拉伸到页面的全高？

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

css

image

twitter-bootstrap

row

col