Reputation: 57286
How can I make the image overflow height responsive?
The images I have sometimes have long heights which make the window scroll bar visible.
So I want to make these heights responsive - to make the image being scaled down to fit the window height.
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
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
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