Масштабировать изображение в HTML-заголовке - PullRequest
Новая
       45

Масштабировать изображение в HTML-заголовке

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

Я хочу масштабировать изображение ниже до высоты заголовка.Может кто-нибудь сказать, пожалуйста, почему он не работает? 

html,
    body {
      height: 100%;
      width: 100%;
      background-color: red;
    }
    
    #header {
      background-color: green;
      height: 10%;
    }
    
    #body {
      background-color: blue;
      height: 70%;
    }
    
    #footer {
      background-color: orange;
      height: 20%;
    }
    
    img {
      max-height: 100%;
      max-width: 100%;
    }
    
    .scaleableImage {
      height: 100%;
      width: auto;
    }
    
    .scaleableImage img {
      max-height: 100%;
      max-width: 100%;
      border: 1px solid red;
    }
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <style type="text/css">
    
  </style>
  <div class="container-fluid" id="header">
    <div class="row">
      <div class="col-2">
        <a href="#" class="scaleableImage">
          <img src="https://www.googlewatchblog.de/wp-content/uploads/google-logo-perfekt.jpg" />
        </a>
      </div>
      <div class="col-6">
        <span>Second</span>
      </div>
      <div class="col-4">
        <span>Third</span>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="body">
    <div class="row">

    </div>
  </div>
  <div class="container-fluid" id="footer">
    <div class="row">
      <div class="col-6">
        <span>First</span>
      </div>
      <div class="col-6">
        <span>Second</span>
      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

1 Ответ

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

Я настроил ваш CSS с учетом следующих основных изменений: 

#header .row {
  max-height: 100%;
}

#header .col-2 {
  padding: 0;
}

Это ограничивает класс row в заголовке максимальной высотой 100%.Если вы установите #header на 10%, row останется в пределах этой высоты.Кроме того, заполнение, установленное на col-2, не позволяло изображению использовать все пространство.Добавьте отступы так, как считаете нужным, но имейте в виду, что при уменьшении ширины класса col изображение будет соответственно уменьшено.Ниже приведен рабочий пример. 

html,
body {
  height: 100%;
  width: 100%;
  background-color: red;
}

#header {
  background-color: green;
  height: 10%;
}

#body {
  background-color: blue;
  height: 70%;
}

#footer {
  background-color: orange;
  height: 20%;
}

#header .row {
  max-height: 100%;
}

#header .col-2 {
  padding: 0;
}

.scaleableImage img {
  max-height: 100%;
  max-width: 100%;
  border: 1px solid red;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div class="container-fluid" id="header">
    <div class="row">
      <div class="col-2">
        <a href="#" class="scaleableImage">
          <img src="https://www.googlewatchblog.de/wp-content/uploads/google-logo-perfekt.jpg" />
        </a>
      </div>
      <div class="col-6">
        <span>Second</span>
      </div>
      <div class="col-4">
        <span>Third</span>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="body">
    <div class="row">

    </div>
  </div>
  <div class="container-fluid" id="footer">
    <div class="row">
      <div class="col-6">
        <span>First</span>
      </div>
      <div class="col-6">
        <span>Second</span>
      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>
...