以相同大小和响应式显示图像，bootstrap 4 和 django

问题描述

1. 我创建了一个图片库来展示我的 django 项目。单击任何图像/列后，会弹出一个带有详细信息的模态。我可以通过数据库传递图像并正确显示所需的数据。但是，我遇到了两个问题：

一个。 Grid wise - 如何以相同尺寸显示图像。撇开比例和艺术指导问题不谈，我找不到以相同宽度和高度显示所有图像的方法。我尝试过的所有方法要么没有改变，要么使情况变得更糟。 （带有 CSS 规范的 div，如封面、适合、定义宽度 + 高度，其中只有一个高度为 100% 等'）

2. 模态明智 – 如何将模态弹出窗口限制为我的屏幕尺寸？一旦打开，Modal 的高度就会溢出我的屏幕尺寸。使用 Chrome 执行此操作比 Firefox 略好。但仍超出我的屏幕尺寸。

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）