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

我正在使用Bootstrap自由职业者主题（）创建一个页面

我想确保忍者的图像填满了可用的空间，但不会离开页面底部。（我在container DIV上加了一个红色边框，以便更容易地看到发生了什么。）

我如何设置它，使其始终调整到最大的大小，但不裁剪任何图像

我尝试过使用

对象填充：contain

，但没有成功

此外，如果我尝试设置高度：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>

---

尝试使用最大高度并将其设置为初始值。

尝试使用最大高度并将其设置为初始值。

您只需将您的

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
}

---

您只需将您的

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
}

---

您应该能够使用

height

将孩子的图像大小设置为家长的div。尝试将

position:relative

添加到父级

这里有一个例子：

changeParentHeight=value=>document.getElementsByClassName（“父”）[0]。style.height=`${value}px`
.parent{
位置：相对位置；
高度：100px；
宽度：200px；
文本对齐：居中；
边框：5px纯红；
}
.parent>img{
身高：100%；
最大宽度：100%；
}
您应该能够使用
高度
将孩子的图像大小设置为家长的div。尝试将
position:relative
添加到父级

这里有一个例子：


changeParentHeight=value=>document.getElementsByClassName（“父”）[0]。style.height=`${value}px`
.parent{
位置：相对位置；
高度：100px；
宽度：200px；
文本对齐：居中；
边框：5px纯红；
}
.parent>img{
身高：100%；
最大宽度：100%；
}

没有快乐，没有幸福：-（不快乐，不幸福。）-（您可以设置高度：*vh
100vh
填充一个完整的页面您可以设置高度：*vh

100vh

填充一个完整的页面父div仍然是一个固定的高度，但出于示例的考虑。您可以将其设置为

100vh

，这样也可以正常工作。如果您选择此选项，还可以将图像设置为100vh。）将图像设置为100%高度，将父级设置为100vh。子级将采用其父级的高度，因此也将获得100vh…我认为最好通过父级包装图像并控制其大小，而不是将该图像设置为具有特定高度。父级div仍然是固定高度，考虑到示例，是的。您可以设置它到

100vh

也可以。然后，您还可以将图像设置为100vh如果您将图像设置为100%高度，并且父对象设置为100vh，则子对象将采用父对象的高度，因此它也将获得100vh…我认为最好通过父对象包装图像并控制其大小，而不是将该图像设置为具有特定的高度高度。