title: How to stretch image to full height of page in bootstrap col?
body: <p>I'm trying to create a login page like this:</p>
  <p><a href="https://i.stack.imgur.com/JynFT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JynFT.png" alt="enter image description here" /></a></p>
  <p>What I created so far looks like this:</p>
  <p><a href="https://i.stack.imgur.com/ISryg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ISryg.png" alt="enter image description here" /></a></p>
  <p>With this code:</p>
  <pre><code>&lt;div class=&quot;control-section&quot; style=&quot;max-width: 100% !important;&quot;&gt;
          &lt;div class=&quot;row&quot; style=&quot;height:100%;&quot;&gt;
              &lt;div class=&quot;col-md-4&quot; style=&quot;height: 100% !important; padding-top: 25px !important;&quot;&gt;
                  &lt;section&gt;
                      &lt;form id=&quot;account&quot; method=&quot;post&quot;&gt;
                          &lt;h4&gt;LOGIN &lt;/h4&gt;
                          &lt;hr /&gt;
                          &lt;div asp-validation-summary=&quot;All&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;label asp-for=&quot;Input.Email&quot;&gt;&lt;/label&gt;
                              &lt;input asp-for=&quot;Input.Email&quot; class=&quot;form-control&quot; /&gt;
                              &lt;span asp-validation-for=&quot;Input.Email&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;label asp-for=&quot;Input.Password&quot;&gt;&lt;/label&gt;
                              &lt;input asp-for=&quot;Input.Password&quot; class=&quot;form-control&quot; /&gt;
                              &lt;span asp-validation-for=&quot;Input.Password&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;div class=&quot;checkbox&quot;&gt;
                                  &lt;label asp-for=&quot;Input.RememberMe&quot;&gt;
                                      &lt;input asp-for=&quot;Input.RememberMe&quot; /&gt;
                                      @Html.DisplayNameFor(m =&gt; m.Input.RememberMe)
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Log in&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;p&gt;
                                  &lt;a id=&quot;forgot-password&quot; asp-page=&quot;./ForgotPassword&quot;&gt;Forgot your password?&lt;/a&gt;
                              &lt;/p&gt;
                              &lt;p&gt;
                                  &lt;a asp-page=&quot;./Register&quot; asp-route-returnUrl=&quot;@Model.ReturnUrl&quot;&gt;Register as a new user&lt;/a&gt;
                              &lt;/p&gt;
                              &lt;p&gt;
                                  &lt;a id=&quot;resend-confirmation&quot; asp-page=&quot;./ResendEmailConfirmation&quot;&gt;Resend email confirmation&lt;/a&gt;
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/section&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-md-8&quot; style=&quot;max-width: 100% !important; height: 100% !important;&quot;&gt;
                  &lt;img src=&quot;~/Resources/placeholderimage.png&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  @section Scripts {
       &lt;partial name=&quot;_ValidationScriptsPartial&quot; /&gt;
  }
  
  &lt;style&gt;
  .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%;
  }
  
  &lt;/style&gt;
  </code></pre>
  <p>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.</p>
  <p>Thanks</p>