Bootstrap - 如何縮小圖像以適應窗口高度？

Question

如何使圖像溢出高度響應？

我有時擁有的圖像長度很高，使窗口滾動條可見。

所以我想讓這些高度響應 - 使圖像按比例縮小以適應窗口高度。

可能嗎？

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>

Answer 1

您可以在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> 

Answer 2

用內置的.center-block of bootstrap替換.centering類

然后添加一個新類.myimg

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

檢查這個小提琴https://jsfiddle.net/wo2eysh8/3/