Fix image sizing to properly fill containers
Browse files- Set max-width: 100% and max-height: 100% for images
- Images now expand to fill available space while preserving aspect ratio
- Added width: 100% to container for proper sizing
- object-fit: contain ensures images stay within bounds
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
app.py
CHANGED
|
@@ -739,7 +739,16 @@ css = """
|
|
| 739 |
justify-content: center !important;
|
| 740 |
align-items: center !important;
|
| 741 |
min-height: 400px !important;
|
| 742 |
-
max-height: !important;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 743 |
}
|
| 744 |
"""
|
| 745 |
|
|
|
|
| 739 |
justify-content: center !important;
|
| 740 |
align-items: center !important;
|
| 741 |
min-height: 400px !important;
|
| 742 |
+
max-height: 500px !important;
|
| 743 |
+
width: 100% !important;
|
| 744 |
+
}
|
| 745 |
+
.image-container img {
|
| 746 |
+
max-width: 100% !important;
|
| 747 |
+
max-height: 100% !important;
|
| 748 |
+
width: auto !important;
|
| 749 |
+
height: auto !important;
|
| 750 |
+
object-fit: contain !important;
|
| 751 |
+
object-position: center !important;
|
| 752 |
}
|
| 753 |
"""
|
| 754 |
|