时间戳

首页 > 解决方案 > 如何在 bootstrap col 中将图像拉伸到页面的全高？

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

问题描述

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

在此处输入图像描述

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

在此处输入图像描述

使用此代码：

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

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

谢谢

标签： cssimagetwitter-bootstraprowcol

解决方案

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

  1. 可能图像不会拉伸整个宽度，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;
   }
}

推荐阅读