在 HTML 标头中缩放图像答案

【问题标题】：Scale Image in HTML Header在 HTML 标头中缩放图像
【发布时间】：2019-02-22 18:50:45
【问题描述】：

我想将下面的图像缩放到标题的高度。谁能告诉我为什么它不起作用？

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>

【问题讨论】：

jsfiddle.net/27qmjpzx
因为 Bootstrap 中的.row 没有定义高度，所以会溢出 10% 高的 header。
嘿，Mty，最好将您的代码包含在问题本身中。这将帮助任何人快速查看您到目前为止所做的尝试。此外，他们可以通过单击按钮将代码复制到他们的答案中，对其进行调整并发布。这将有助于快速获得答案。以下是您下次如何自己做的方法。 Introducing Runnable JavaScript, CSS, and HTML Code Snippets

标签： html css bootstrap-4 image-scaling

【解决方案1】：

我已经调整了您的 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>

【讨论】：