Fix image aspect ratio preservation in interface
Browse files- Updated CSS to properly preserve image aspect ratios
- Added container flexbox styling to center images properly
- Set max-height constraints while maintaining width: auto
- Images now display at same size while preserving original proportions
- Prevents stretching or distortion of satellite images
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
app.py
CHANGED
|
@@ -732,12 +732,22 @@ def upscale_and_resize_for_display(image):
|
|
| 732 |
|
| 733 |
return display_upscaled
|
| 734 |
|
| 735 |
-
# Custom CSS to ensure images display at exactly the same size
|
| 736 |
css = """
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 737 |
.image-container img {
|
| 738 |
max-width: 100% !important;
|
|
|
|
|
|
|
| 739 |
height: auto !important;
|
| 740 |
object-fit: contain !important;
|
|
|
|
| 741 |
}
|
| 742 |
"""
|
| 743 |
|
|
|
|
| 732 |
|
| 733 |
return display_upscaled
|
| 734 |
|
| 735 |
+
# Custom CSS to ensure images display at exactly the same size while preserving aspect ratio
|
| 736 |
css = """
|
| 737 |
+
.image-container {
|
| 738 |
+
display: flex !important;
|
| 739 |
+
justify-content: center !important;
|
| 740 |
+
align-items: center !important;
|
| 741 |
+
min-height: 400px !important;
|
| 742 |
+
max-height: 500px !important;
|
| 743 |
+
}
|
| 744 |
.image-container img {
|
| 745 |
max-width: 100% !important;
|
| 746 |
+
max-height: 500px !important;
|
| 747 |
+
width: auto !important;
|
| 748 |
height: auto !important;
|
| 749 |
object-fit: contain !important;
|
| 750 |
+
object-position: center !important;
|
| 751 |
}
|
| 752 |
"""
|
| 753 |
|