如何将元素的大小限制为模态对话框的大小？

如何解决如何将元素的大小限制为模态对话框的大小？

我正在制作一个丑陋的应用程序，并且使用了bootstrap 3模态对话框来显示图像。我想将图像的大小限制为模式对话框的大小，而无需设置图像的宽度和高度，因为图像当前位于对话框上方。这是我的意思：image

下面是我的模板代码。我是模板设计的新手，所以任何提示和建议也将不胜感激！

<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>

解决方法

您可以使用background-size属性使图像适合模式。

 background-size: 100% 100%;

这是Stackblitz上的working Demo。

,

使用引导程序的“ img-fluid”类

<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/

,

我明白了。我只是使用了“响应img”的类。

        <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>