CSS изменение размера изображения в качестве родительского div сжимается - PullRequest
Новая
       2

CSS изменение размера изображения в качестве родительского div сжимается

0 голосов
/ 25 сентября 2018

Всякий раз, когда я изменяю размер веб-страницы по вертикали, изображение не будет прилипать к его родительскому контейнеру (баннеру) и вместо этого переполняется, когда родительский 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>

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Для изображения вы можете использовать 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>
0 голосов
/ 25 сентября 2018

Если вы оборачиваете изображение в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...