我使用的是bootstrap 4模式,该模式基本上只包含一个图像。现在我将我的模式对话框最大宽度设置为95%。每当模态打开时,它总是95%,这在图像较大时看起来很好。但是当有一个很小的图像时,模态仍然是95%的宽度,还有一个很小的图像,看起来不太好。
如何缩放模式,以便如果图像较大,宽度将为95%,但如果图像较小,它将调整为该图像的最大宽度?
css文件,大部分代码只是让模式显示在屏幕的中心
.modal-dialog {
min-height: -webkit-calc(100vh - 60px);
min-height: -moz-calc(100vh - 60px);
min-height: calc(100vh - 60px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: auto;
max-width: 95%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img [src]="picture" alt="large picture" class="img-fluid">
</div>
</div>
</div>
</div>
最佳答案
我建议使用
.modal-body {
margin:auto;
max-width:100%;
}
或将引导类添加到框中
<div class="modal-body mx-auto mw-100 ">
列表可以在这里找到:https://getbootstrap.com/docs/4.0/utilities/sizing/&https://getbootstrap.com/docs/4.0/utilities/spacing/
如果这不起作用,请让我们知道并用足够的代码更新您的代码片段,以便实时显示您的问题;)