Make the image fill with the remaining vertical space, without scrolling

Question

I have a page with a heading, paragraph and one image, which can have very different sizes / proportions.

I would like the image to adapt so that it either fills the maximum available height, or is limited by its width, without losing proportions, without causing scrolling.

this is my main configuration:

angular.module("myApp", ["ngMaterial"]); 

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script> <div ng-app="myApp" layout="column" layout-fill> <div flex style="background: red;"> <h1>Title</h1> <p>Details. Blablabla.</p> </div> <div flex="60" style="background: blue;" object-fit="fill"> <img id="myImg" ng-src="http://placehold.it/200x400"/> <!-- Should work with such extreme case as well --> <!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> --> </div> </div> 

I have looked at many SO posts, websites, blogs, etc. I can’t figure out where to start doing this. Most articles about fluid images or responsive images only talk about scrollable web pages. Therefore, even a good link to this topic would be useful. Thanks.

EDIT: Updated debugged to use flex layout . As you can see, the image goes beyond the blue div. I used object-fit="content"; or object-fit="fill"; but no one limits the image to respecting the borders of the div

Answer 1

This can be done with object-fit ( this is not IE support ) and css calc ( it supports most broswer ).

What did you do?

I wrap a div image ( .wrapper ), calculate its height with css calc .

 height: calc(100vh - 19px - 38px); //100% of viewport - height of p - height of h1 

and then use object-fit for the image .wrapper height is .wrapper , keeping the image ration.

High-altitude image

 angular.module("myApp", ["ngMaterial"]); 

 h1, p { padding: 0; margin: 0; } .wrapper { width: 100%; height: calc(100vh - 19px - 38px); } img { object-fit: fill; height: 100%; max-width: 100%; display: block; margin: 0 auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script> <div ng-app="myApp" layout="column" layout-align="center center" style-parent> <h1>Title</h1> <p>Details. Blablabla.</p> <div class="wrapper"> <img id="myImg" ng-src="http://placehold.it/200x400" /> <!-- Should work with such extreme case as well --> <!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> --> </div> </div> 

Image is less than height

 angular.module("myApp", ["ngMaterial"]); 

 h1, p { padding: 0; margin: 0; } .wrapper { width: 100%; height: calc(100vh - 19px - 38px); } img { object-fit: fill; height: 100%; max-width: 100%; display: block; margin: 0 auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script> <div ng-app="myApp" layout="column" layout-align="center center" style-parent> <h1>Title</h1> <p>Details. Blablabla.</p> <div class="wrapper"> <!-- <img id="myImg" ng-src="http://placehold.it/200x400" /> --> <!-- Should work with such extreme case as well --> <img id="myImg" ng-src="http://placehold.it/1000x200" /> </div> </div> 

Answer 2

I would use css properties like "background-size: cover". Here is an example. The first 2 containers use the lid approach on two containers with different aspect ratios without changing the image ratio. The third uses "pixel sizes." Remember that if u resizes the x or y axis, do it only on one of them and define the other as automatic so as not to change the image ratio (for example, the effect of freezing on the third container).

fiddle: https://jsfiddle.net/coolcatDev/0111sfmg/2/

HTML:

 <div class="container1"> </div> <br> <div class="container2"> </div> <br> <div class="container3"> </div> 

CSS

 .container1 { background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'); background-repeat:no-repeat; background-size:cover; height:300px; width:300px; border:2px solid green; } .container2 { background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'); background-repeat:no-repeat; background-size:cover; height:600px; width:200px; border:2px solid green; } .container3 { background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center; height:200px; width:300px; border:2px solid green; } .container3:hover { background-size: 450px auto; } 

You can define this in your stylesheet, inline, inside a user directive, ng style, or whatever else suits you.

Browser Support: http://www.w3schools.com/cssref/css3_pr_background-size.asp