Force img height 100% of parent height

Asked Sep 20 '15 at 10:06

Active Sep 20 '15 at 10:24

Viewed 1,518 times

Have this image inside a section which has to be forced to have the exact same height of the section height. I worked this out but it doesn't seems to work on resizing.

Code I have

HTML

  <section id="header-bg">
    <img src="images/background.png">
  </section>

CSS

$header-bg-top: 80px;
$header-bg-height: 620px;
#header-bg {
  position: relative;
  top: $header-bg-top;
  max-height: $header-bg-height;
  overflow: hidden;
  border-bottom: 1px solid red;
    img {
      background: url(../images/background.png);
      width: 100%;
      height: 100%;
      object-fit: cover;
      overflow: hidden;
    }
  }

Result on full screen:

Result on resized screen:

I already found a lot on the internet, but this is not working out for me.

CSS - Expand float child DIV height to parent's height

How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

edited May 23 '17 at 12:03

Community

asked Sep 20 '15 at 10:06

Jim Vercoelen

1,048
2
14
40

Please add your code to fiddle – Laxmikant Dange Sep 20 '15 at 10:07
Give the parent a height, not only a max-height. Why would you use a background image on the img element? Set the bg at the parent – Fionna Sep 20 '15 at 10:08
@LaxmikantDange sorry for being unclear, updated the post – Jim Vercoelen Sep 20 '15 at 10:10
Please post your html too – AndrewL64 Sep 20 '15 at 10:11
@FionnaChan, if I give the parant a height it would not scale any more – Jim Vercoelen Sep 20 '15 at 10:13
@AndrewLyndem updated my post, sorry, don't know why I forgot the html code.. – Jim Vercoelen Sep 20 '15 at 10:13
1

Try this #header-bg img { height: 100%; width: auto; } – Fionna Sep 20 '15 at 10:16
@FionnaChan scaling then won't working anymore and the with is nog full screen:( – Jim Vercoelen Sep 20 '15 at 10:19
You are not showing CSS (as stated in your tags). – connexo Sep 20 '15 at 10:24
In which browser does it not work? – connexo Sep 20 '15 at 10:27
@connexo, all the code is there? Using google chrome – Jim Vercoelen Sep 20 '15 at 10:32
Add `#header-bg img { display: block; }`. – connexo Sep 20 '15 at 10:38

Force img height 100% of parent height

0 Answers0