Question

在我的页面上，我希望有一个带有图像（gif）的英雄区，并且希望它具有相同的宽度（页面的100％）但高度可以调整（随着我调整窗口大小）。

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

这是我的代码，（使用布尔玛）：

.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/

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

Answer 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长度单位。

为什么min-height像max-height一样起作用？

1 个答案: