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

Question

我正在制作一个 anuglar 应用程序，我使用 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>

Answer 1

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

 background-size: 100% 100%;

这是 Stackblitz 上的 working Demo。

Answer 2

使用bootstrap

的“img-fluid”class

<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

我让它工作了。我刚刚使用了 '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>

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

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

html

css

bootstrap-modal

angular