如何使用CSS确保图像不超过可用的浏览器高度？

Question

我正在使用Bootstrap Freelancer主题（https://startbootstrap.com/themes/freelancer/）整理页面。

我要确保忍者的图像填充可用空间，但不要超出页面底部。 （我在容器DIV上添加了红色边框，以使其更容易查看发生了什么。）

如何设置它以使其始终调整为最大尺寸，但不裁剪任何图像？

我尝试使用object-fill:contain，但是没有用。

如果我尝试将height：80％设置为某值，由于某种原因，它会将图像的尺寸调整得更小-不知道为什么？

这是代码：

<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column" style="border: 1px solid red">

  <!-- Masthead Avatar Image -->
  <img class="masthead-avatar mb-5" style="margin-top:-100px;" src="img/magic-assassin.svg" alt="">

  <!-- Masthead Heading -->
  <h1 class="masthead-heading text-uppercase mb-0">Magic Assassin</h1>

  <!-- Icon Divider -->
  <div class="divider-custom divider-light">
    <div class="divider-custom-line"></div>
    <div class="divider-custom-icon">
      <i class="fas fa-star"></i>
    </div>
    <div class="divider-custom-line"></div>
  </div>

  <!-- Masthead Subheading -->
  <p class="masthead-subheading font-weight-light mb-0">Nu-Disco - Edits - Balearic</p>

</div>
</header>

这是CSS：

.masthead {
  padding-top: calc(6rem + 74px);
  padding-bottom: 6rem;
}

.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
}

.masthead .masthead-subheading {
  font-size: 1.25rem;
}

    .masthead .masthead-avatar {


    }

Answer 1

您可以将img设置为100vh。请记住，这也考虑了搜索栏的高度，因此您可能会少一些。为了解决这个问题，我通常将其设置为95vh。这样可以避免任何中断。

img {
  height:100vh;
}

在您的情况下，由于您使用calc作为身高，因此您可以采用相同的方法来应用此方法，如下所示：

img {
  height:calc(100vh-74px); // I'm assuming this is the height of your nav, given your css
}

Answer 2

您应该可以使用height将孩子的图像尺寸设置为父母的div。尝试将position: relative添加到父项。

这里有个例子：

changeParentHeight = value => document.getElementsByClassName("parent")[0].style.height = `${value}px`;

.parent {
  position: relative;
  height: 100px;
  width: 200px;
  text-align: center;
  border: 5px solid red;
}

.parent>img {
  height: 100%;
  max-width: 100%;
}

<input type="range" min="100" max="1000" value="100" onchange="changeParentHeight(this.value)" />
<div class="parent">
  <img src="https://assets.fireside.fm/file/fireside-images/podcasts/images/b/bc7f1faf-8aad-4135-bb12-83a8af679756/cover_medium.jpg?v=0" />
</div>

Answer 3

尝试使用max-height并将其设置为初始值。