How do you constrain the size of elements to the size of the modal dialog?

Question

I am making an anuglar app and I make use of bootstrap 3 modal dialogs to display images. I'd like to limit the size of the images to to the size of the modal dialog without setting the width and height of the images since the images currently extend over the dialog. Here is what I mean:image

Below is my template code. I'm a novice at template designs so any tips and suggestions would also be much appreciated!

<div class="modal modal-backdrop" tabindex="-1" [ngStyle]="{display: floorPlanChooseDialogShow ? 'block' : 'none'}">

<div class="modal-dialog" role="document">
    <div class="modal-content">

        <div class="modal-header">
            <div class="modal-title">
                <h5>
                    Choose your floor plan.
                </h5>
            </div>
        </div>

        <div class="modal-body">


            <form #f="ngForm">

                <div class="container" style="width: 700px;" id="fpImages">

                    <div class="row">
                        <div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
                            <img src="../../assets/img/Versailles 3D FP.jpg" alt="">
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
                            <img src="../../assets/img/Versailles 3D FP.jpg" alt="">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
                            <img src="../../assets/img/Barcelona Combined.jpg" alt="">
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6" id="fpimg">
                            <img src="../../assets/img/Bourdeaux.jpg" alt="">
                        </div>
                    </div>
                </div>


            </form>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="onToggleChooseFloorPlanDialog()">
                Submit
            </button> |
            <button type="button" class="btn btn-warning" (click)="onToggleChooseFloorPlanDialog()">
                Cancel
            </button>
        </div>

    </div>
</div>

Answer 1

I got it to work. I just used 'img-responsive" class.

        <div class="modal-body">
            

                .....


                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6" 
                    id="fpimg" 
                    data-toggle="tooltip" 
                    data-placement="top" 
                    title="Lourdes"
                    >
                    <img class="img-responsive" src="../../assets/img/Lourdes 1 3D fP.jpg" 
                        name="lourdes"
                        (click)="selectedFloorPlan($event)"
                    >
                </div>


               .....


        </div>

Answer 2

Use the "img-fluid" class of the bootstrap

<img class="img-fluid m-0 p-0" src="exemplo.com">

https://getbootstrap.com/docs/4.0/components/modal/
https://getbootstrap.com/docs/4.0/content/images/

Answer 3

You can use the background-size property to make the image fit in the modal.

 background-size: 100% 100%;

Here is a working Demo on Stackblitz.