スケーリングに問題 - - 優秀な図書館

ブラウザを垂直方向にサイズ変更したときに画面上を移動するイメージの問題を解決する方法がわかりません。また、画像が画面上に移動するだけでなく、バナーのテキストと背景も移動し、バナーテキストがバナーから外れるようになります。スケーリングに問題 -

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>A-level Revision Website</title> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
</head> 
<body> 
    <div class="banner"> 
     <h1>A-Level Revision Website</h1> 
    </div> 
    <div> 
     <form id="loginForm"> 
      <input type="email" class="login-username" autofocus="true" required="true" placeholder="Email" /><br> 
      <input type="password" class="login-password" required="true" placeholder="Password" /><br> 
      <input type="submit" name="Login" value="Login" class="login-submit" /><br> 
      <a href="#" class="login-forgot-pass">forgot password?</a> 
     </form> 
    </div> 
    <div id="imagesMain"> 
     <a href="Maths.html"> 
      <img src="images/Maths.jpg" alt="Maths"> 
     </a> 
     <a href="ComputerScience.html"> 
      <img src="images/Computer_Science.jpg" alt="ComputerScience"> 
     </a> 
     <a href="Physics.html"> 
      <img src="images/Physics.jpg" alt="Physics"> 
     </a> 
    </div> 
</html> 

.banner{ 
    position: absolute; 
    width: 100%; 
    height: 25%; 
    top: 0; 
    left: 0; 
    padding: 0; 
    margin: 0; 
    background-color: #595959; 
    color: #fff; 
    text-align: center; 
    line-height: 180px; 
    font-family: 'Lato', sans-serif; 
    font-size: 25px; 
} 

#imagesMain{ 
    position: absolute; 
    max-width: 75rem; 
    left: 0; 
    right: 0; 
    margin: auto; 
    bottom: 0; 
    padding: 0; 
    margin: 20px auto; 
    text-align: center; 
} 

#imagesMain a{ 
    width:30%; 
    float:left; 
    position:relative; 
    margin:1.5%; 
} 

img{ 
    max-width: 100%; 
    height: auto; 
    margin-right: 25px; 
    position: relative; 
} 

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    display:table; 
} 
body { 
    display:table-cell; 
    vertical-align:middle; 
} 
form { 
    display:table; 
    margin:auto; 
}

https://jsfiddle.net/zntzep48/7/

出典

2017-09-30 user7808079

バナーのテキストは、スクリーンに対して移動されていませんが、あなたは、画面の高さの25％に設定しているため、灰色の背景が動いています。ウィンドウの高さを調整すると、それに応じてバナーが調整されます。 heightプロパティを完全に削除してください。行の高さを削除し、パディングトップを設定します。相対位置を設定するようにバナーを設定して、フォームを覆うようにします。

は

#form { 
    display: table; 
    margin: 0 auto; 
}

を追加し、そのIDをフォームのdiv要素を変更します。 bodyとhtmlに入れたtable-cellテーブル表示を削除します。

＃イメージの位置を相対位置に変更します。

作業溶液：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>A-level Revision Website</title> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
</head> 

<style> 
.banner{ 
    position: relative; 
    width: 100%; 
    top: 0; 
    left: 0; 
    padding: 0; 
    margin: 0; 
    background-color: #595959; 
    color: #fff; 
    text-align: center; 
    font-family: 'Lato', sans-serif; 
    font-size: 25px; 
    padding-top: 50px; 
} 

#imagesMain{ 
    position: relative; 
    max-width: 75rem; 
    left: 0; 
    right: 0; 
    margin: auto; 
    bottom: 0; 
    padding: 0; 
    margin: 20px auto; 
    text-align: center; 
} 

#imagesMain a{ 
    width:24%; 
    float:left; 
    margin:1.5%; 
} 

img{ 
    max-width: 100%; 
    height: auto; 
    margin-right: 25px; 
    position: fixed; 
    bottom:0; 
} 

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
body { 
    vertical-align:middle; 
} 
#form { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 50%; 
} 
</style> 

<body> 
    <div class="banner"> 
     <h1>A-Level Revision Website</h1> 
    </div> 

    <div id="form"> 
     <form id="loginForm"> 
      <input type="email" class="login-username" autofocus="true" required="true" placeholder="Email" /><br> 
      <input type="password" class="login-password" required="true" placeholder="Password" /><br> 
      <input type="submit" name="Login" value="Login" class="login-submit" /><br> 
      <a href="#" class="login-forgot-pass">forgot password?</a> 
     </form> 
    </div> 

    <div id="imagesMain"> 
     <a href="Maths.html"> 
      <img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Maths""> 
    </a> 
     <a href="ComputerScience.html"> 
      <img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="ComputerScience"> 
    </a> 
     <a href="Physics.html"> 
      <img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Physics""> 
     </a> 
    </div> 
</body> 
</html>

EDIT：ページの途中でフォームを作成し、ページの下部に画像を配置する編集コード（彼らはリサイズに移動します）。

出典

2017-10-01 05:36:14 Qwerty

私の画像とログインフォームの両方が機能していますが、その位置はあります。画像はページの中央に配置され、ログインフォームはページの中央に配置されていたはずです。どのようにこの問題を解決するための任意のアイデアですか？ – user7808079

は、ページ上の唯一のフォームですか？ – Qwerty

ヘッダー、ログインフォーム、画像 – user7808079

スケーリングに問題 -

答えて

関連する問題