Я не могу заставить изображение реагировать на разделенный экран входа в систему bootstrap дизайн с перезагрузкой изображения - PullRequest
Новая
       37

Я не могу заставить изображение реагировать на разделенный экран входа в систему bootstrap дизайн с перезагрузкой изображения

0 голосов
/ 09 марта 2020

Я работаю на разделенном экране входа в систему, и он полностью совпал с bootstrap:

before js add

html

Запрашивается изменение изображения на левой стороне при перезагрузке страницы. Я нашел способ сделать это с помощью JavaScript и включил его в свой код, но это сделало изображения непонятными. Слева есть пространство, ненужная полоса прокрутки, потому что высота также отключена, и изображение больше не реагирует. Очевидно, мне пришлось изменить код, чтобы заставить js работать, и js работает отлично, но теперь раскладка облажалась:

after js add

not responsive

html

js

css осталось одинаковым для обоих примеров, но я чувствую, что должен поделиться этим в любом случае:

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

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