Css 如何限制模型的高度？

我正在寻找一种方法，使模态对话框保持在屏幕范围内，即它的高度总是小于屏幕高度，并且宽度也相应地调整。我试过：

.modal-dialog {
  max-height: 100%;
}

但这似乎没有任何效果

举例说明：

如果存在的话，我更喜欢纯CSS解决方案（没有js）。为清楚起见，我要的是最大高度，而不是高度（即模态不高于屏幕，保持原样）。

与

计算一起使用。像这样：

.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:浏览器对视口单位的支持是
如果您确保父元素设置了高度，那么您应该能够非常轻松地进行设置。我已经给了页眉和页脚10%的高度，给了正文80%的高度，所以加起来就是100:）

我认为您应该使用overflow:hidden on.modal dialog，使用一种样式来保持图像比例。
如果您将最大高度和最大宽度设置为100%，则屏幕将自动相应地显示，但如果您希望此对话框的大小变小，则必须将最大高度和最大宽度设置为某个固定值。
因为您已经使用了响应模型对话框，所以它将根据您的屏幕大小自动更改对话框大小

尝试以下css，它可能会根据您的要求工作。您可以相应地更改“最大高度”和“最大宽度”，左边距和右边距用于居中对齐

 .modal-dialog {
      max-height: 225px;
      max-width:  200px; 
      margin-left: auto;
      margin-right: auto;
    }

希望它能帮助你
 脚本

$('#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));
});

尝试使用css进行一些更改

css:

因为默认值设置为自动，宽度和高度为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;
}

.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;
}

下面是JSFIDLE中的

您还可以将其分为以下几个部分：

/*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;
}

.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;
}

更新的：
首先修复容器大小，然后设置模式对话框大小

例如：

.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}

目标是
模态体
，而不是
模态对话框

将以下内容添加到CSS中：

max-height: 80vh;
overflow-y: auto;

应该是这样的：

.modal-body {
    max-height: 80vh; overflow-y: auto;
}

将VH高度调整为首选项
 哦，哇。我不知道浏览器支持有多好-对于视口单位以及calc（）。我不喜欢图像的
calc
。有可能摆脱它吗？你可以使用小于100vh（视窗全高）的东西，比如90vh，尽管这会因设备而异。@georg我用一种不使用
calc
的方法更新了答案，请原谅我的无知，但是第一种解决方案中的225px来自哪里，第二种解决方案中的113px是什么？如果我更改字体和边距，我应该重新计算这些数字吗？有没有理由不使用其他人的jQuery插件？谷歌搜索“responsive Mode”（响应模式）提供了许多选项，我99%相信其中一个可以满足您的需求。在Chrome和Firefox中，图像仍然超出了模型：啊，很抱歉。该段还必须具有100%的高度。我已经在这里更新了代码
.model content p{height:100%；}
此外，如果模态的最外层父级设置为max height，则模型也应在该范围内挤压。这一切都是为了确保所有最顶端的父项都设置为与浏览器一样高。你能发一把小提琴吗？你是对的，不幸的是，这比我想象的要难！我已经尝试了一段时间没有成功，对不起。。。但这可能会有帮助：你能发布一个提琴吗？如果你将图像设置为img responsive，则上述.modal dialog img代码中的更改不会在宽度和高度上显示不好图像转向左侧：p OP需要限制模态对话框，而不是图像：D