为什么最小高度像最大高度一样？答案

【问题标题】：Why does min-height act like max-height?为什么最小高度像最大高度一样？
【发布时间】：2018-10-06 05:53:17
【问题描述】：

在我的页面上，我希望有一个带有图像（gif）的英雄部分，并且我希望它具有相同的宽度（页面的 100%）但高度可调节（当我调整窗口大小时）。

但由于某种原因，我的图像高度最大为 400 像素（这也是我的最小高度），这导致图像被拉伸，如下所示：

这是我的代码，（使用 Bulma）：

.hero {
  background: url("https://cdn-images-1.medium.com/max/1600/1*XI3beonBnOwp-y5BwNOqCw.gif");
  background-size: 100% 100%;
  background-repeat: no-repeat; 
  min-height:400px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<body class="has-navbar-fixed-top">
  <nav class="navbar is-info is-fixed-top">
    <div class="container has-text-centered">
      <div class="navbar-brand" style="flex-grow: 1; justify-content: center;">
        <a class="navbar-item" href="https://bulma.io" >
        <img src="https://vignette.wikia.nocookie.net/narutofanon/images/c/cc/Fdl-logo.svg/revision/latest?cb=20130812063152">
        </a>
      </div>
    </div>
  </nav>
  <section class="hero is-large has-text-centered">
  </section>
</body>

这是 JSFIDDLE ： https://jsfiddle.net/8xjtknaf/2/

有什么办法，我可以避免设置最小高度值，因为它只是感觉很hacky。我的代码是否有适当的方法来检测图像的大小并相应地进行缩放？

【问题讨论】：

你可以和background-size: cover;一起使用像height: 100vh;这样的高度属性。
对于高度部分，请参阅1 和2 以获得可能的解决方案。

标签： css bulma

【解决方案1】：

在您检查了@xRdev_38 的评论后，您可能希望在不使用滚动条的情况下使图像适合当前屏幕。

.hero1 {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.hero1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
  <body>
    <nav class="navbar is-info is-fixed-top">
        <div class="container has-text-centered">
          <div class="navbar-brand" style="flex-grow: 1; justify-content: center;">
            <a class="navbar-item" href="https://bulma.io" >
            <img src="https://vignette.wikia.nocookie.net/narutofanon/images/c/cc/Fdl-logo.svg/revision/latest?cb=20130812063152">
            </a>
          </div>
        </div>
    </nav>
    <section class="hero1">
        <img src="https://cdn-images-1.medium.com/max/1600/1*XI3beonBnOwp-y5BwNOqCw.gif" alt="">
    </section>
  </body>

查看 CSS 中的 object-fit 和 overflow。 object-fit: cover 提供您的 img 以完美适应屏幕。而overflow: hidden 会移除屏幕外的img 的边缘。

我个人不建议使用background-image，除非你真的需要它。在这种情况下很难给出这样的值。

另外，this 文章将帮助您了解 CSS 长度单位。

【讨论】：