Make an Image Fit Its Container by Setting The Image Height to The Containers Heights

Make an image fit its container by setting the image height to the containers heights

Give 100% width of image

 .image.a{width:100%;}

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

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="Sample Image">    </div>            Method 2    <div class="second-image">      <img src="http://via.placeholder.com/350x150" alt="Sample Image">    </div>

Make Iframe to fit 100% of container's remaining height

Update in 2019

TL;DR: Today the best option is - flexbox. Everything supports it nicely and has for years. Go for that and don't look back. Here is a code sample for flexbox:

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

How can I make all images of different height and width the same via CSS?

Updated answer (No IE11 support)

img {    float: left;    width:  100px;    height: 100px;    object-fit: cover;}

<img src="http://i.imgur.com/tI5jq2c.jpg"><img src="http://i.imgur.com/37w80TG.jpg"><img src="http://i.imgur.com/B1MCOtx.jpg">

Displaying content over an image

So one thing I forgot about when I posted this question is that the image would sometimes need to push out just above its containers bounds and show in the previous container (I've been calling it an iceberg internally, if that helps picture it at all).

Because of this, the background-image approach wouldn't work, or at least not anyway I knew of.

I did manage to figure this out though by using what @HelenaSánchez suggested, using min-height.

I set a min-height on both the image and the content to calc((100vw / IMAGE_WIDTH) * IMAGE_HEIGHT) (for example, calc((100vw / 1600) * 800)).

Then to get that iceberg effect I previously mentioned, I gave the image a negative margin-top and the content a negative margin-bottom of the same amount.

It's not the cleanest approach in my opinion but it solves my problem without any JavaScript.

---

Related Topics