CODEWITHSUNDEEP
bootstrap-4bootstrap-modal
ullevi83
ullevi83

Reputation: 199

Increase image size on modal screen

Modal screen on bootstrap is not showing full image size.

I have tried changing the modal sizes in css, but to no avail.

<div class="modal fade bd-example-modal-lg show" id="ftl1Modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="dynamic-content">
                <img src="~/Content/Images/FamilyTrees/FamilyTreeLarge_1.png" class="img-fluid" alt="Family Tree Image 1" />
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-4 col-6">
            <a href="#ftl1Modal" role="button" class="d-block mb-4 h-100" data-toggle="modal">
                <img src="~/Content/Images/FamilyTrees/FamilyTreeThumb_1.png" class="img-fluid" alt="Family Tree Image 1" />
            </a>
</div>

I was hoping that when I clicked on the thumbnail image it would display the image at it's true width and height, is there away to achieve this?

Thanks for your help as always.

Upvotes: 0

Views: 836

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362350

You can make the modal fit the image width like this...

  • On modal-dialog add d-flex for display:flex
  • On modal-content add flex-shrink-1 w-auto mx-auto for flex-shrink:1;width:auto

Then a custom class to reset the max-width:

.modal-custom {
    max-width: inherit;
}

https://codeply.com/p/BuCU19i1mH/

<div class="modal fade show" id="ftl1Modal" role="dialog">
    <div class="modal-dialog d-flex modal-custom">
        <div class="modal-content flex-shrink-1 w-auto mx-auto">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="dynamic-content">
                <img src="..." class="img-fluid" alt="Family Tree Image 1" />
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions