[英]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. 我有时拥有的图像长度很高,使窗口滚动条可见。
So I want to make these heights responsive - to make the image being scaled down to fit the window height. 所以我想让这些高度响应 - 使图像按比例缩小以适应窗口高度。
Is it possible? 可能吗?
CSS, 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, 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
您可以在img
上使用height: 100%
和vertical-align: top
,在父元素上使用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 用内置的.center-block
of bootstrap替换.centering
类
Then add a new class .myimg 然后添加一个新类.myimg
.myimg {
margin: 0 auto;
position: absolute;
height:100%;
top:0;
bottom:0;
}
Check this fiddle https://jsfiddle.net/wo2eysh8/3/ 检查这个小提琴https://jsfiddle.net/wo2eysh8/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.