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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div  id="modalImage2" tabindex="-1" aria-labelledby="allImage2" aria-hidden="true" style="display: block;">
  <div >
    <div >
      <div >
        <h2  id="allImage2">image title</h2>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
        <img  src="https://images.unsplash.com/photo-1564754943164-e83c08469116?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80" alt="">
        <p >image description</p>
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

A few things to fix:

• Remove max-height from .modal-content
• Add overflow-hidden to .modal-body
• Add w-100 h-100 classes to img (remove img-fluid)
• Add object-fit: cover css rules to img

img {
  object-fit: cover
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div  id="modalImage2" tabindex="-1" aria-labelledby="allImage2" aria-hidden="true" style="display: block;">
  <div >
    <div >
      <div >
        <h2  id="allImage2">image title</h2>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
        <img  src="https://images.unsplash.com/photo-1564754943164-e83c08469116?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80" alt="">
        <p >image description</p>
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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