Twitter Bootstrap Question posted in

Bootstrap 4 modal scale with content – Twitter bootstrap

I’m using bootstrap 4 modal, the modal basically just contain an image. Right now I set my modal dialog max-width to 95%. Whenever the modal opens, it’s always 95%, which looks good when the image is large. But when there’s a tiny image, the modal is still 95% width and there’s the tiny image, which doesn’t look really good.

How do I scale the modal so that if the image is big, the width will be 95% but if the image is small, it will adjust to the max-width of that image?

the css file, most of this code is just to make the modal appear in the center of the screen

.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>
Tags:

2

Answers


  1. 0

    I would sugest to use

    .modal-body {
  margin:auto;
  max-width:100%;
}

    or add bootstrap class to the box

    <div class="modal-body  mx-auto mw-100 ">

    Listing can be found here: https://getbootstrap.com/docs/4.0/utilities/sizing/ & https://getbootstrap.com/docs/4.0/utilities/spacing/

    If that does not work, please , let us know and update your snippet with enough code to show your issue live 😉

    Login or Signup to reply.
  2. 0

    You could load the image in background, in a hidden container and when it’s loaded, get its size and readjust the modal’s width consequently.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search