CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
Run
Run

Reputation: 57286

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

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>

Upvotes: 6

Views: 3526

Answers (2)

Zacaria
Zacaria

Reputation: 95

Replace the .centering class by the built-in .center-block of bootstrap

Then add a new class .myimg

.myimg {
  margin: 0 auto;
  position: absolute;
  height:100%;
  top:0;
  bottom:0;
}

Check this fiddle https://jsfiddle.net/wo2eysh8/3/

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122155

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>

Upvotes: 3

Related Questions