Question

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

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>

Answer 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>

在HTML标头中缩放图像

1 个答案: