对于带有图像重新加载的登录分割屏幕引导设计，我无法使映像响应。

Question

我正在开发一个登录拆分屏幕，并使其与引导完全一致：

​

​

​

​

请求在页面重新加载时更改左侧图像。我已经找到了一种用JavaScript实现这一目标的方法，并将其应用到我的代码中，但它使图像变得不稳定。在左边有一个空间，一个不必要的滚动条，因为高度也是关闭的，并且图像不再响应。显然，我必须更改代码才能让js运行，js运行得很完美，但是现在布局变得一团糟：

​

​

​

​

​

​

​

​

css在这两个示例中都保持不变，但我觉得无论如何我都应该分享它：

​

​

我离得太近了，我只是想不出一个办法来修复这个图像。任何帮助都将不胜感激。

以下是完整的代码：

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

联署材料：

<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

请在图像标签中使用class=“img响应”.

​

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

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

This change is enough for your issue....

​

这个变化对你的问题已经足够了..。