我正在寻找一种在屏幕范围内保持模态对话框的方式，即其高度总是小于屏幕高度，并且相应地调整宽度。我试过了：
.modal-dialog {
max-height: 100%;
}
http://jsfiddle.net/ma4zn5gv/@H_301_5@
插图：@H_301_5@
如果存在，我更喜欢纯CSS解决方案(无js)。为了清楚起见，我正在寻找最大高度，而不是高度(即，模态不比屏幕高，离开它)。@H_301_5@
解决方法
使用
viewport units与calc。喜欢这个：
.img-responsive {
max-height: calc(100vh - 225px);
}
…其中225px对应于对话框顶部和底部的高度。@H_301_5@
另外，为了照顾模态的宽度，我们需要再设置一些属性：@H_301_5@
.modal {
text-align:center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
Updated Fiddle(调整视口高度的大小来看效果)@H_301_5@
或者：@H_301_5@
我们可以用填充负边距技术代替calc，如：@H_301_5@
.img-responsive {
max-height: 100vh;
margin: -113px 0;
padding: 113px 0;
}
