如何解决以相同大小和响应式显示图像,bootstrap 4 和 django
一个。 Grid wise - 如何以相同尺寸显示图像。撇开比例和艺术指导问题不谈,我找不到以相同宽度和高度显示所有图像的方法。我尝试过的所有方法要么没有改变,要么使情况变得更糟。 (带有 CSS 规范的 div,如封面、适合、定义宽度 + 高度,其中只有一个高度为 100% 等')
- 模态明智 – 如何将模态弹出窗口限制为我的屏幕尺寸?一旦打开,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 举报,一经查实,本站将立刻删除。