How to get an image to adapt in size to match the HEIGHT of its container

Question

I'm trying to do this in CSS and thought it was simple, I've never actually needed to do this before, but now I've tried it I can't get it to work.

I have a container, and in it is an image. What I want is the image to increase in size based on HEIGHT not WIDTH. I thought this would as easy as this:

#project-header {
   height: 50%;
}
#project-header img {
display: block;
height: 100%;
width: auto;
margin: auto;
}

This isn't working.

My container is 50% height of the browser window, so this is all fine, but the image displays at its original size.

I expected it to behave as a responsive image would when using width: 100%, height: auto; but my image is ALWAYS its original size (and so flows out of the container) and doesn't adapt to the height of its container.

Am I missing something? Or is this just not possible? Is there a way to do this?

go through this https://stackoverflow.com/q/15295697/1471352 — srp, Mar 25 '18 at 18:13
I went through this but my problem remains. If I set my width to max-width: 100% as described in that post, my image resizes to the width of the container, but ignores the height of the container and increases in size to fit the width, not the height . So, if say my image is 1000px x 1000px, and the container is 1000px by 500px, I want my image to adapt to the height and so to resize in width but not exceed 500px. At the moment my image expands to 1000px and overflows out of the box — Steve McC, Mar 26 '18 at 08:30

Junaid Anwar · Accepted Answer · 2018-03-26T08:53:34.217

0

To have your div take height: 50%, you first need to give height:100% to all the parent divs all the way to the html tag

html, body{
height:100%;
}

Then your css will work as expected

    #project-header{
            height:50%;
    }
    #project-header img{
            max-height: 100%;
            width: auto;
    }

html, body{
  height:100%;
  /* width: 95%; */
}

#project-header{
  height:50%;
  width: 500px;
}
#project-header img{
  max-height: 100%;
  width: auto;
}

.second-image{
  height:50%;
  /* width: 500px; */
}
.second-image img {
    max-width: 100vw;
    height:auto;
    width:auto;
    max-height:100vh;
}

Method 1
    <div id="project-header">
      <img src="http://via.placeholder.com/350x150" alt="">
    </div>
    
    
    Method 2
    <div class="second-image">
      <img src="http://via.placeholder.com/350x150" alt="">
    </div>

edited Mar 26 '18 at 08:53

answered Mar 25 '18 at 18:37

Junaid Anwar

844
1
9
22

Hi, my html and body is correctly set to height 100%, and the container behaves as expected (it takes up 50% of the height of the browser window), however the image DOESN'T behave as I expected it would. It seems to ignore the height of the container completely and displays full size. – Steve McC Mar 26 '18 at 08:28
Added a working code snippet now, will make more sense now. – Junaid Anwar Mar 26 '18 at 08:54
Thank you, but neither of these are working for me. In both cases the same thing happens, the image ignores the height of its container. To explain what I need: If the image is 1000px x 1000px, and the container is 1000px wide and 500px tall, I need the image to match the height of the container - so it would be 500px high. – Steve McC Mar 26 '18 at 09:42
Would be nice if you make a js fiddle – Junaid Anwar Mar 26 '18 at 10:01
Sorry, ran it again, probably my cache playing up - your solution did the trick – Steve McC Mar 26 '18 at 15:23

How to get an image to adapt in size to match the HEIGHT of its container

1 Answers1