Resizing images to fit in a container perfectly

Question

I searched this question all over on here and found a couple of examples and I tried one in particular, but it is not working at all like I am wanting it to.

I have set the container's height to 600px and it is not even coming close. I am sure it is due to my image width only being 33%, but is there a way to get these taller at all or am I stuck with the height only being this tall?

I don't get why the far right image isn't even going to the top of the container. I at least want that to be like that.

Is there anyway to adjust the height for these images or will that pull it completely out of proportion?

 $(window).load(function(){ $('.home-img-block').find('img').each(function(){ var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall'; $(this).addClass(imgClass); }) }) 

 #home-img-blocks { width: 100%; height: 600px; } /*#home-img-blocks-container { border: 1px solid black; }*/ .home-img-block { width: 33%; height: 100%; border: 1px solid black; display: inline-block; } .home-img-block img.wide { max-width: 100%; max-height: 100%; max-width: 100%; height: auto; } .home-img-block img.tall { max-width: 100%; max-height: 100%; max-width: 100%; width: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="home-img-blocks"> <div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg"> </div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div> </div> 

Answer 1

Following way you can cover whole height of your container. Remove max-width from image and give vertical-align:top and overflow: hidden; to container.

But not that, it will cut your image because it will not maintain aspect ratio as height is so high and width small.

 $(window).load(function(){ $('.home-img-block').find('img').each(function(){ var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall'; $(this).addClass(imgClass); }) }) 

 #home-img-blocks { width: 100%; height: 600px; } /*#home-img-blocks-container { border: 1px solid black; }*/ .home-img-block { width: 33%; height: 100%; border: 1px solid black; display: inline-block; overflow: hidden; vertical-align: top; } .home-img-block img.wide { max-height: 100%; } .home-img-block img.tall { max-width: 100%; max-height: 100%; max-width: 100%; width: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="home-img-blocks"> <div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg"> </div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div> </div> 

Answer 2

Well, you have set your height to auto for the pics so if your rightmost picture has different original size than the other 2 that might be the problem. You can try to add an id for the last picture and than work with it specifically increasing its height. You can also try to use bootstrap it is incredible useful for dividing you screen on equal parts.

Answer 3

#home-img-blocks {
    font-size: 0;
    height: 600px;
    width: 100%;
}
/*#home-img-blocks-container {
    border: 1px solid black;
}*/
.home-img-block {
    border: 1px solid black;
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 33.33%;
}
.home-img-block img.wide {
    height: 100%;
    margin-left: -20%;
    width: auto;
}
.home-img-block img.tall {
    height: 100%;
    margin-left: -50%;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<div id="home-img-blocks">
    <div class="home-img-block">
        <img src="http://optimumwebdesigns.com/images/test1.jpg">
    </div>
    <div class="home-img-block">
        <img src="http://optimumwebdesigns.com/images/test2.jpg">
    </div>
    <div class="home-img-block">
        <img src="http://optimumwebdesigns.com/images/test3.jpg">
    </div>
</div>

You can try the above code, It will work out for all normal desktop screen perfectly..

Answer 4

html

<div id="home-img-blocks">

      <div class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test1.jpg">
  </div>

  <div class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test2.jpg">
  </div>

  <div class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test3.jpg">
  </div>

</div>

css

#home-img-blocks {
  display:flex;
  flex-direction:center;
  /* flex-wrap:wrap; */ /* turn this on if you want the images to wrap on smaller browsers */
  width:auto; /* calculates to 1156px wide */
    height: 600px;
}

.home-img-block {
    flex:0 0 896px; /* round down of narrowest image at 600px height */
  overflow:hidden;
    border: 1px solid black;
}

.home-img-block img {
    max-height:100%;
}

js

no need

http://codepen.io/anon/pen/WrdELK

Documentation

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Support

http://caniuse.com/#search=flex

Do extra code specifically for ie11 if need be (#home-img-blocks -> display:table / .home-img-block --> display:table-cell) but look in ie11 first, because it may be fine.