我使用的是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/
如果这不起作用,请让我们知道并用足够的代码更新您的代码片段,以便实时显示您的问题;)

10-06 06:08
查看更多