Question

每当我垂直调整网页大小时，图像将不会停留在其父容器（横幅）内，而是会在父div小于图像尺寸时溢出。通过在垂直调整大小时查看容器和图像的边界，可以在代码段中看到这一点。一旦父div变得比图片小，我可以通过什么方法缩小图片？

/* Styling used for index pages including registration form and reset password pages. */

* {
  box-sizing: border-box;
}

body,
html {
  font-family: 'Lato', Arial, sans-serif;
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  overflow: hidden;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  background: #595959;
  color: #fff;
  display: flex;
  flex: 1;
  border-bottom: 3px solid #FFD700;
  font-size: 2.5em;
}

.banner{
  margin: 0 auto;
  display: flex;
  align-items: center;
  border: 3px solid red;
}

.banner img{
  height: auto;
  border: 3px solid red;
 }
 
 main{
  display: flex;
  flex: 4;
}

<body>
	<div class="wrapper">
		<header>
			<div class="banner">		
				<h1>Quiz Manager</h1>
				<img src="https://via.placeholder.com/115x115" alt="Logo">
			</div>
		</header>
		<main>
			<div class="container">
				<div class="form-container">
					<form action="index.php" method="POST">
						<div class="form-row">
							<input type="text" name="username" value="<?php echo isset($_POST['username']) ?  htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
						</div>
						<div class="form-row">
							<input type="password" name="password" placeholder="Password">
						</div>
						<div class="form-row">
							<button type="submit" name="submit">Login</button>
						</div>
					</form>
			 	</div>
			 	<div class="links">
			 		<a href="forgot-password/forgotPass.php" id="forgotPass">Forgot Password?</a> 
					<p id="or">or</p>
					<!--If user needs to register an account, they can follow this link.-->
					<a href="signup.php" id="Signup">Sign Up</a>
				</div>
			</div>
		</main>
	</div>
</body>

Answer 1

如果将图像包装在div中，然后将包装的div和img都设置为height: 100%，则可以解决问题。

请参见摘要：

/* Styling used for index pages including registration form and reset password pages. */

* {
  box-sizing: border-box;
}

body,
html {
  font-family: 'Lato', Arial, sans-serif;
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  overflow: hidden;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  background: #595959;
  color: #fff;
  display: flex;
  flex: 1;
  border-bottom: 3px solid #FFD700;
  font-size: 2.5em;
}

.banner{
  margin: 0 auto;
  display: flex;
  align-items: center;
  border: 3px solid red;
}

.img-wrap {
height: 100%;
text-align: right;
}

.banner img{
  border: 3px solid red;
  height: 100%
 }
 
 main{
  display: flex;
  flex: 4;
}

<body>
	<div class="wrapper">
		<header>
			<div class="banner">		
				<h1>Quiz Manager</h1>
        <div class="img-wrap">
				<img src="https://via.placeholder.com/115x115" alt="Logo">
        </div>
			</div>
		</header>
		<main>
			<div class="container">
				<div class="form-container">
					<form action="index.php" method="POST">
						<div class="form-row">
							<input type="text" name="username" value="<?php echo isset($_POST['username']) ?  htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
						</div>
						<div class="form-row">
							<input type="password" name="password" placeholder="Password">
						</div>
						<div class="form-row">
							<button type="submit" name="submit">Login</button>
						</div>
					</form>
			 	</div>
			 	<div class="links">
			 		<a href="forgot-password/forgotPass.php" id="forgotPass">Forgot Password?</a> 
					<p id="or">or</p>
					<!--If user needs to register an account, they can follow this link.-->
					<a href="signup.php" id="Signup">Sign Up</a>
				</div>
			</div>
		</main>
	</div>
</body>

Answer 2

对于图像，可以在max-height中使用vh。我使用了70vh，但是您可以根据需要进行调整。
对于文本大小，没有max-font-size，因此我使用媒体查询来完成此操作。

/* Styling used for index pages including registration form and reset password pages. */

* {
  box-sizing: border-box;
}

body,
html {
  font-family: 'Lato', 'Arial', sans-serif;
  width: 100vw;  /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  overflow: hidden;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  background: #595959;
  color: #fff;
  display: flex;
  flex: 1;
  border-bottom: 3px solid #FFD700;
  font-size: 2.5em;
}

.banner {
  margin: 0 auto;
  display: flex;
  align-items: center;
  border: 3px solid red;
}

.banner img {
  height: auto;
  border: 3px solid red;
  max-height: 70vh;  /* adjust image to small screens */
}

main {
  display: flex;
  flex: 4;
}

@media (max-height: 15rem) { /* adjust font size to small screens */
  header {font-size:16.67vh;}
}

<body>
  <div class="wrapper">
    <header>
      <div class="banner">
        <h1>Quiz Manager</h1>
        <img src="https://via.placeholder.com/115x115" alt="Logo">
      </div>
    </header>
    <main>
      <div class="container">
        <div class="form-container">
          <form action="index.php" method="POST">
            <div class="form-row">
              <input type="text" name="username" value="<?php echo isset($_POST['username']) ?  htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
            </div>
            <div class="form-row">
              <input type="password" name="password" placeholder="Password">
            </div>
            <div class="form-row">
              <button type="submit" name="submit">Login</button>
            </div>
          </form>
        </div>
        <div class="links">
          <a href="forgot-password/forgotPass.php" id="forgotPass">Forgot Password?</a>
          <p id="or">or</p>
          <!--If user needs to register an account, they can follow this link.-->
          <a href="signup.php" id="Signup">Sign Up</a>
        </div>
      </div>
    </main>
  </div>
</body>

当父div缩小时，css调整图像大小

2 个答案: