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

问题描述 投票：0回答：2

每当我垂直调整网页大小时，图像将不会粘贴在其父容器（横幅）中，而是在父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>
html css image
2个回答
0
投票

对于图像，您可以在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>
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.