Why does min-height act like max-height?

Question

On my page, I want to have a hero section with an image(a gif) and I want it to have the same width(100% of the page) but an adjustable height(as I resize my window).

But for some reason, the height of my image goes a maximum of 400px (which is also my min-height), which leads to a stretched image like:

Here is my code, (uses 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>

Here is the JSFIDDLE : https://jsfiddle.net/8xjtknaf/2/

Is there any way, I can avoid setting a min-height value because it just feels hacky. Is there a proper way for my code to detect the size of my image and scale accordingly?

You can use with `background-size: cover;` the height property like this `height: 100vh;` . — xRdev_38, Oct 05 '18 at 21:08
For the height part, see [1](https://stackoverflow.com/a/30489501/483779) and [2](https://stackoverflow.com/a/10441480/483779) for possible solutions. — Stickers, Oct 05 '18 at 21:12

score 0 · Answer 1 · answered Oct 05 '18 at 21:53

After you've checked @xRdev_38's comment, you might wanted to fit the image on the current screen without scrollbar.

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

Check out object-fit and overflow in CSS. object-fit: cover provides your img to fit on the screen perfectly. And overflow: hidden removes img's edges that outside of the screen.

And Personally, I do not recommend using background-image unless if you really need it. It's going to be hard to give values like in this case.

Also, this article would help you to understand about CSS length units.

Why does min-height act like max-height?

1 Answers1