BorisEm Claude commited on
Commit
3133830
·
1 Parent(s): 36f9b89

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>

Files changed (1) hide show
  1. app.py +11 -1
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