Bootstrap - how to make the image being scaled down to fit the window height?


Tags: javascript,jquery,html,css,twitter-bootstrap-3

Problem :

How can I make the image overflow height responsive?

The images I have sometimes have long heights which make the window scroll bar visible.

enter image description here

So I want to make these heights responsive - to make the image being scaled down to fit the window height.

enter image description here

Is it possible?

CSS,

 html, body {
    height: 100%;
    margin: 0;
    padding: 0 0;
    border: 4px solid black;
}

.container-fluid {
    height: 100%;
    display: table;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    border: 4px solid blue;
}

.row-fluid {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    width: 100%;

    border: 4px solid red;
}

.centering {
    float: none;
    margin: 0 auto;
}

HTML,

<div class="container-fluid">
    <div class="row-fluid text-center">
        <div>
            <img src="images/xxx.jpg" class="img-responsive centering">
        </div>
    </div>
</div>


Solution :

You can use height: 100% and vertical-align: top on img and on parent element use height: 100vh

body, html {
  margin: 0;
  padding: 0;
}

div {
  display: inline-block;
  height: 100vh;
  width: 100%;
  text-align: center;
}

img {
  height: 100%;
  vertical-align: top;
}
<div>
  <img src="http://placehold.it/400x850">
</div>


    CSS Howto..

    How to make edgy corners with css

    GWT how to add css style on Image Resource

    How to modify divs in grid template site?

    How to fill a text with color using CSS?

    How do you change the appearance of a button in javascript?

    CSS - How to align 2 fields into 1 row?

    css rules multi class, how to match two out of many

    How can I hide an element that doesn't have an id from the CSS?

    how to change single li element in a menu using lists?

    Home and Contact Us tab's hover effects in my dropdown navigation menu not how I want it

    Css, text shadow - How to get it overflow off the div

    How to get all CSS of element

    How to Change CSS Styling on a Checkbox on Hover with JQuery

    HTML emails in 2013: How to control spacing between elements like paragraphs and images?

    How can I get this menu to hug the top of the page, widen out, and provide some space below it?

    How to utilize css of this style in LESS?

    CSS Background Color Not Showing

    How to use HTML and CSS as a Java application GUI?

    How to add background-image onto the first option of a dropdownlist

    How to rotate multiple words with CSS?

    css how to make this checkbox smaller

    CSS how to auto adjust width img tag

    How to make a hidden border side inherit border properties in CSS

    How to place elements on top of each other

    How can I separate and make a menu with these links in CSS without using unordered lists [closed]

    How to centre a div vertically and horizontallly?

    how to place div next to centered div css

    Intellij IDEA 11: how can I compile .css from .less?

    Use ajax to show-hide only a subset of image

    How to Convert SASS on the fly to CSS in Python?