design: Display images in correct ratio in timeline

lib/pages/chat/events/image_bubble.dart

@@ -15,8 +15,8 @@ class ImageBubble extends StatelessWidget {
   final Color? backgroundColor;
   final bool thumbnailOnly;
   final bool animated;
-  final double width;
+  final double? width;
-  final double height;
+  final double? height;
   final void Function()? onTap;
   final BorderRadius? borderRadius;
 
@@ -25,7 +25,7 @@ class ImageBubble extends StatelessWidget {
     this.tapToView = true,
     this.maxSize = true,
     this.backgroundColor,
-    this.fit = BoxFit.cover,
+    this.fit = BoxFit.contain,
     this.thumbnailOnly = true,
     this.width = 400,
     this.height = 300,
@@ -98,8 +98,8 @@ class ImageBubble extends StatelessWidget {
           child: ConstrainedBox(
             constraints: maxSize
                 ? BoxConstraints(
-                    maxWidth: width,
+                    maxWidth: width ?? double.infinity,
-                    maxHeight: height,
+                    maxHeight: height ?? double.infinity,
                   )
                 : const BoxConstraints.expand(),
             child: MxcImage(

lib/pages/chat/events/message_content.dart

@@ -106,11 +106,22 @@ class MessageContent extends StatelessWidget {
       case EventTypes.Sticker:
         switch (event.messageType) {
           case MessageTypes.Image:
+            const width = 200;
+            const ratio = 2.0;
+            final w = event.content
+                    .tryGetMap<String, Object?>('info')
+                    ?.tryGet<int>('w') ??
+                width;
+            final h = event.content
+                    .tryGetMap<String, Object?>('info')
+                    ?.tryGet<int>('h') ??
+                width;
+            final overRatio = h > w * ratio;
             return ImageBubble(
               event,
-              width: 400,
+              height: overRatio ? width * ratio : null,
-              height: 300,
+              width: width.toDouble(),
-              fit: BoxFit.cover,
+              fit: overRatio ? BoxFit.cover : BoxFit.contain,
               borderRadius: borderRadius,
             );
           case MessageTypes.Sticker: