How do I make an image take up 100% of a Bootstrap modal container?

user_18584673 0
Viewed 72

I have some bootstrap modals with images in them. Some of them are long vertically which makes a scrollbar appear. I tried to fix this by setting a max-height to the modal-content and having modal-body, where the image is inside of to be 100% of that. Now the backdrop is the height I set it to, but the image still extends past the container.

jsfiddle: https://jsfiddle.net/cLn52tqg/

.modal-content {
  max-height: 85vh;
}

.modal-content>.modal-body {
  max-height: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="modal fade show" id="modalImage2" tabindex="-1" aria-labelledby="allImage2" aria-hidden="true" style="display: block;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h2 class="modal-title w-100 text-dark" id="allImage2">image title</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1564754943164-e83c08469116?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80" alt="">
        <p class="modalText text-dark text-center mt-2">image description</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

bootstrap-5 twitter-bootstrap css html
2 Answers

Seems like setting a max height is preventing the image to scale down inside the container. Setting height fixed the issue you can add a calc() function if you want to add some extra height into consideration.

.modal-content>.modal-body{
    height: 70vh;
    overflow: auto;
    position: relative;
}
.modal-content>.modal-body > img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
user_121785940

I setup a custom class for the modal content which will use display: grid for this -- it doesn't work in the tiny little snippet preview but if you run the snippet and view full page you will see it working nicely

.modal-content.grid-content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: calc( 100vh - 1.75rem - 1.75rem ); /* Account for vertical margin on parent */
}

.modal-content.grid-content .modal-body {
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}

.modal-content.grid-content .modal-body > * {
  min-height: 0;
}
.modal-content.grid-content .modal-body img {
  display: block;
  margin: auto;
  max-height: 100%;
  
  /* REMOVE THESE 2 LINES IF YOU WANT IMAGE TO CCENTER INSTEAD OF CROP */
  object-fit: cover;
  width: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="modal fade show" id="modalImage2" tabindex="-1" aria-labelledby="allImage2" aria-hidden="true" style="display: block;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content grid-content">
      <div class="modal-header text-center">
        <h2 class="modal-title w-100 text-dark" id="allImage2">image title</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img class="img-fluid" src="https://images.unsplash.com/photo-1564754943164-e83c08469116?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80" alt="">
        <p class="modalText text-dark text-center mt-2">image description</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

user_192137250
Related