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>
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>
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.