CODEWITHSUNDEEP
bootstrap-5bootstrap5-modal
Paul Taylor
Paul Taylor

Reputation: 13190

How can I make a Bootstrap 5 modal fit image content?

I have a webpage that shows an image up to size 400x400px, if they click on the image then I want it to display in a modal that sizes to accommodate the actual size of the image

The modal comes up but it defaults to 500px whatever the size of the image (from https://getbootstrap.com/docs/5.2/components/modal/#fullscreen-modal). If the image is larger than that I want the modal to be larger, and if smaller I want the modal to be smaller, I cannot see how to do this. I notice you can also have a fullscreen image by using modal-fullscreen but that doesn't help me.

Surely possible for the modal to size to accommodate the data

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

<div>
  <a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
    <img src="https://via.placeholder.com/400" class="figure-img img-fluid border border-dark">
  </a>

  <div id="full_size_image_dialog" class="modal">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5>
            Full Size artwork
          </h5>
        </div>
        <div class="modal-body">
          <img src="https://via.placeholder.com/500" class="figure-img img-fluid border border-dark">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Edit

So I went though the answers at How to resize Twitter Bootstrap modal dynamically based on the content

The only answer that sort of worked was adding style="max-width : 1200px;"to the div with bootstrap class of modal-dialog

<div id="full_size_image_dialog" class="modal">
    <div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5>
                    Full Size artwork
                </h5>
            </div>
            <div class="modal-body">
                <img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
                <figcaption>
                    1200 x 1200
                </figcaption>
            </div>
        </div>
    </div>
</div>

The trouble is that if the actual height of the image is larger than the height of the browser window then the image has to be scrolled vertically

enter image description here

What I actually want is the full image to be displayed full size but only if enough room in browser, otherwise display the max size it can be displayed without vertical scrolling. I can set a lower value for max-width so it works on my window, but then that is not going to be great for users with bigger resolution windows.

It does handle preventing sideways scrolling okay, so if the width of window is too small to show whole image it will shrink image accordingly, and we can reasonably assume images will usually be square.

enter image description here

So my attempted solution was to use Bootstraps container system to set different max-width size for different screen widths using col-md, col-xl ectera. But the trouble is it seems from the help that modal windows need to use their own container within the modal-body div but this isn't going to help because the max-width style has to be applied at the modal div so is outside of modal-body scope.

I tried just utilising the main page container, but it just uses the first dialog code each time, i.e it never uses more than 700px max width

<div class="row g-0">
    <div class="col p-2">
        <div id="full_size_image_dialog" class="modal">
            <div class="modal-dialog modal-dialog-scrollable" style="max-width : 700px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>
                            Full Size artwork
                        </h5>
                    </div>
                    <div class="modal-body">
                        <img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
                        <figcaption>
                            1200 x 1200
                        </figcaption>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md p-2">
        <div id="full_size_image_dialog" class="modal">
            <div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5>
                            Full Size artwork
                        </h5>
                    </div>
                    <div class="modal-body">
                        <img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
                        <figcaption>
                            1200 x 1200
                        </figcaption>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row g-0">
    <div class="col-7 col-md-6 col-lg-4 col-xl-3 p-2">
        <a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
            <img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="img-fluid border border-dark">
        </a>
    </div>

Upvotes: 4

Views: 6527

Answers (1)

Dimitris Maragkos
Dimitris Maragkos

Reputation: 11312

At the moment, this is the best solution I could come up with using only CSS:

.modal-dialog {
  max-width: max-content !important;
}

.modal-body {
  display: flex;
}

.modal-body img {
  object-fit: contain;
}

Only problem is that white bars appear to the left and right of the image when screen height is less then image height.

Modal

This is because of the object-fit: contain; style which I added to the image to maintain the original aspect ratio. If you remove this style then then white bars will disappear but the image will not keep it's initial aspect ratio when it's height is shrinking.

JS Fiddle: https://jsfiddle.net/hvaosw5j/

Upvotes: 5

Related Questions