我正在寻找一种将模态对话框保持在屏幕范围内的方法，即它的高度始终小于屏幕高度，并且宽度会相应调整。我试过了：
.modal-dialog {
max-height: 100%;
}
但这似乎没有任何效果。
插图：
如果存在，我更喜欢纯 CSS 解决方案（无 js）。为清楚起见，我正在寻找最大高度，而不是高度（即模态是否不高于屏幕，保持原样）。
【问题讨论】：
标签： css twitter-bootstrap-3 responsive-design
定位modal-body 而不是modal-dialog。
将以下内容添加到您的 CSS：
max-height: 80vh;
overflow-y: auto;
应该是这样的：
.modal-body {
max-height: 80vh; overflow-y: auto;
}
根据喜好调整 VH 高度。
【讨论】：
将viewport units 与calc 一起使用。像这样：
.img-responsive {
max-height: calc(100vh - 225px);
}
...其中 225px 对应于对话框周围视口顶部和底部的组合高度。
此外，为了处理模态框的宽度，我们需要设置更多属性：
.modal {
text-align:center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
我们可以用填充 + 负边距技术替换 calc，如下所示：
.img-responsive {
max-height: 100vh;
margin: -113px 0;
padding: 113px 0;
}
PS：浏览器对视口单元的支持是very good
【讨论】：
calc 的图片。有没有可能摆脱它？
calc 的方法更新了答案
由于默认值设置为自动，宽度和高度为 100%。你只能修改；视口内的图像和目标ID，如下：
/*let target has the same value as modal-dialog*/
#myModal {
width:auto;
height:auto;
margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
width:70%;
height:70%;
margin:0 auto;
}
这是 jsfiddle 中的 DEMO。
你也可以把它分成如下：
.modal-dialog img {
width:100%;
height:100%;
margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
width:60%;
height:60%;
margin:0 auto;
}
更新DEMO：
【讨论】：
先固定容器大小，再设置模态对话框大小。
例如：
.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}
【讨论】：
尝试对 Fiddle 进行一些 css 更改。
css:
.modal-dialog {
height: 100%;
margin: 0;
padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
【讨论】：
脚本
$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});
【讨论】：
如果您将 max-height 和 max-width 设置为 100%，那么它会自动占用相应的屏幕，但是如果您希望此对话框尺寸更小，则您必须将 max-height 和 max-width 设置为某个固定值。 由于您已经使用了响应式模型对话框，因此它会根据您的屏幕大小自动更改对话框大小。
尝试遵循 css，它可能会根据您的要求工作。您可以相应地更改 max-height 和 max-width，margin-left 和 margin-right 用于居中对齐。
.modal-dialog {
max-height: 225px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
希望对你有帮助！！
【讨论】：
我认为您应该在 .modal-dialog 上使用溢出：隐藏，并使用一种样式来保持图像比例。
【讨论】：
如果您确保父元素设置了高度，那么您应该可以很容易地做到这一点。我给了页眉和页脚 10% 的高度和 80% 的主体，所以它们加起来是 100 :)
.modal, .modal-dialog, .modal-content{
height: 100%;
}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
max-height:100%;
}