smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: Optimize modal image sizing for better viewport fit

Browse Source 
Adjusted modal image display to fit properly in viewport:
- Reduced min-height from 80vh to 60vh for header+navigation space
- Reduced max-height from 85vh to 75vh to ensure bottom controls visible
- Kept max-width: 85vw for large square image display
- Images now properly contained within modal with visible controls

Result: Images display large but modals fit completely on screen without scrolling.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andrey Smakotin
2025-10-22 23:59:41 +03:00
parent 65e07c2f1b
commit 3b50d82d19
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
myproject/products/templates/products/product_detail.html
View File

@@ -66,9 +66,9 @@
<div class="carousel-inner">
{% for photo in product_photos %}
<div class="carousel-item {% if forloop.first %}active{% endif %}">
<div class="text-center" style="min-height: 80vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
<div class="text-center" style="min-height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
<!-- Large 1200x1200 WebP для полного размера просмотра -->
<img src="{{ photo.get_large_url }}" class="d-block" alt="Фото товара" style="max-height: 85vh; max-width: 95%; object-fit: contain;">
<img src="{{ photo.get_large_url }}" class="d-block" alt="Фото товара" style="height: auto; width: auto; max-height: 75vh; max-width: 85vw; object-fit: contain;">
</div>
</div>
{% endfor %}

4
myproject/products/templates/products/productkit_detail.html
View File

@@ -196,9 +196,9 @@
<h5 class="modal-title">Фото комплекта</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center" style="min-height: 80vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
<div class="modal-body text-center" style="min-height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
<!-- Large 1200x1200 WebP для полного размера просмотра -->
<img src="{{ photo.get_large_url }}" class="img-fluid" style="max-height: 85vh; max-width: 95%;">
<img src="{{ photo.get_large_url }}" class="img-fluid" style="height: auto; width: auto; max-height: 75vh; max-width: 85vw;">
</div>
</div>
</div>