I cannot get the image to be responsive for a login split screen bootstrap design with image reload

Question

I am working on a login split screen, and had it perfectly aligned with bootstrap:

It has been requested that the left side image change when the page reloads. I have found a way to do this with JavaScript, and worked it into my code, but it has made the images wonky. There is a space on the left side, an unnecessary scroll bar because the height is off as well, and the image is no longer responsive. Obviously I had to change the code to get the js to run, and the js runs perfectly, but now the layout is screwed up:

The css has stayed the same for both examples, but I feel I should share it anyways:

I have gotten so close, I just can't seem to figure out a way to fix the image. Any help would be greatly appreciated.

Here is the full code:

html:

 <div class="container-fluid">
    <div class="row no-gutter">
        <!-- The image half -->
        <div class="col-md-7 d-none d-md-flex bg-image">
            <img id="myPicture" class="w-100">
        </div>

        <!-- The content half -->
        <div class="col-md-5">
            <div class="login d-flex align-items-center py-5">

        <div class="container">
            <div class="row">
              <div class="col-lg-10 col-xl-7 mx-auto">
               <h3 class="display-4">Student Login</h3>
                 <form action="index.html">
                  <div class="form-group mb-4">
<input id="inputStudentID" type="studentID" placeholder="Student ID"
required="required" autofocus=""class="form-control border-3 shadow-sm px-6">
                  </div>
                  <div class="form-group mb-4">
<input id="inputPassword" type="password" placeholder="Password"
required="required" class="form-control border-3 shadow-sm px-6">
                  </div>
                  <div class="custom-control custom-checkbox mb-4">
<input id="customCheck1" type="checkbox" checked class="custom-control- 
input">
<label for="customCheck1" class="custom-control-label">Remember Me</label>
                  </div>
<button type="submit" style="margin-left: 1px"
class="btn btn-block text-uppercase mb-3 border-3 shadow-sm">Sign In</button>
                  <div class="text-center d-flex justify-content-between">
                  <p>Forgot <a href="login_password.html">Password?</a></p>
                  </div>
                  <div class="text-center d-flex justify-content-between">
<p>Need to <a href="https://my.ntc.edu/psp/csprod/?cmd=login">
 Create Student Account?</a></p></div>
                   </form>
                 </div>
                </div>
             </div>
           </div>
        </div>
    </div>
</div>

css:

.login,
.image {
    min-height: 100vh;
    color: #999999;
    font-family: "Roboto", sans-serif;
}

.bg-image {
    background-size: cover;
    background-position: center center;
}

p {
    color: #999999;
}

a {
    color: #4285f4;
}

a:hover {
    text-decoration: none;
    color: #0f459b;
}

.display-4 {
    font-size: 40px;
    color: #999999;
}

#inputStudentID,
#inputPassword {
    padding: 25px 0 25px 12px;
}

.btn {
    background-color: #4285f4;
    color: white;
}

.btn:hover {
    background-color: #0f459b;
    color: white;
}

.has-error input[type="text"],
.has-error input[type="email"],
.has-error select {
    border: 1px solid #a94442;
}

js:

<script type="text/javascript">
window.onload = choosePic;

var myPix = new Array("images/girls.png", "images/group.png", 
"images/studentbw.png", "images/stairs.png",
    "images/purple.png", "images/portrait.png");

function choosePic() {
    var randomNum = Math.floor(Math.random() * myPix.length);
    document.getElementById("myPicture").src = myPix[randomNum];
}
</script>

Answer 1

Kindly use class="img-responsive" in image tag...

Kindly use  class="img-responsive" in image tag...

   <img id="myPicture" class="img-responsive" />

This change is enough for your issue....

This change is enough for your issue....