Css 以相同大小和响应速度显示图像，bootstrap 4和django 我创建了一个图像库来显示我的django项目。单击任何图像/列后，都会弹出一个包含详细信息的模式。我可以通过数据库传递图像并正确显示所需的数据。然而，我面临两个问题：

a。网格-如何以相同大小显示图像。撇开比例和艺术方向的问题不谈，我无法找到一种方法来显示相同宽度和高度的所有图像。我尝试过的每一件事要么没有改变，要么让事情变得更糟。（具有CSS规格的div，如cover、fit、define width+height，其中只有一个高度为100%，等等）

模态方面–如何将模态弹出窗口限制为我的屏幕大小？一旦打开，模态的高度就超过了我的屏幕大小。Chrome比Firefox稍微好一点。。但还是超出了我的屏幕大小

这是我的代码，我还附上了屏幕截图，因为我提供了来自数据库的图像

收集
{%用于第_obj%页中的绘制}
{{painting.title}
说明：{{painting.Description}


技术：{{painting.medium}sur{{painting.support}


位置：{{painting.Location}

关窗
{%endfor%}

<!-- Portfolio Section-->
        <section class="page-section portfolio" id="portfolio">
            <div class="container">
                <!-- Portfolio Section Heading-->
                <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Collection</h2>
                <!-- Icon Divider-->
                <div class="divider-custom">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon"><i class="fas fa-paint-brush"></i></div>
                    <div class="divider-custom-line"></div>
                </div>
                <!-- Portfolio Grid Items-->

                <div class="row justify-content-center">
                    <!-- Portfolio Item 1-->
                    {% for painting in page_obj %}
                    <div class="col-md-6 col-lg-4 mb-5">
                        <div class="thumbnail">
                        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1{{ painting.id }}">
                            <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                                <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
                            </div>
                            <div class="thumbnail">
                            <img class="img-fluid myimage" src="{{ painting.image.url }}"/>
                        </div>
                            </div>
                            </div>
                    </div>

                    <!-- Portfolio Modal 1-->

                    <div class="portfolio-modal modal fade" id="portfolioModal1{{painting.id}}" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true"><i class="fas fa-times"></i></span>
                                </button>
                                <div class="modal-body text-center">
                                    <div class="container">
                                        <div class="row align-items-start">
                                            <div class="col-lg-10">
                                                <!-- Portfolio Modal - Title-->
                                                <h5 class="portfolio-modal-title text-secondary text-lowercase mb-0" id="portfolioModal1Label">{{ painting.title }}</h5>
                                                <!-- Icon Divider-->
                                                <div class="divider-custom">
                                                    <div class="divider-custom-line"></div>
                                                    <div class="divider-custom-icon"><i class="fas fa-paint-brush"></i></div>
                                                    <div class="divider-custom-line"></div>
                                                </div>
                                                <!-- Portfolio Modal - Image-->
                                                <img class="img-fluid rounded mb-5" src="{{ painting.image.url }}" alt="..." />
                                                <!-- Portfolio Modal - Text-->
                                                <p class="mb-5"><strong>Description:</strong> {{ painting.description }}
                                                <br>
                                                    <strong>Technique:</strong> {{ painting.medium }} sur {{ painting.support }}
                                                <br>
                                                    <strong>Location:</strong> {{ painting.location }}
                                                </p>
                                                <button class="btn btn-primary" data-dismiss="modal">
                                                    <i class="fas fa-times fa-fw"></i>
                                                    Close Window
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>