Use JS to dynamically set height of img modal

sass/_modal.scss

@@ -29,7 +29,6 @@
                 }
             }
             .modal-body--image {
-                height: 72vh;
                 .chat-image {
                     max-height: 99%;
                     max-width: 100%;

src/modals/image.js

@@ -4,6 +4,9 @@ import tpl_image_modal from "../templates/image_modal.js";
 
 export default BootstrapModal.extend({
     toHTML () {
-        return tpl_image_modal({'src': this.src});
+        return tpl_image_modal({
+            'src': this.src,
+            'onload': ev => (ev.target.parentElement.style.height = `${ev.target.height}px`)
+        });
     }
 });

src/templates/image_modal.js

@@ -3,17 +3,18 @@ import { __ } from '../i18n';
 import { modal_close_button, modal_header_close_button } from "./buttons"
 
 
-export default (o) => html`
-    <div class="modal-dialog fit-content" role="document">
-        <div class="modal-content fit-content">
-            <div class="modal-header">
-                <h4 class="modal-title" id="message-versions-modal-label">${__('Image: ')}<a target="_blank" rel="noopener" href="${o.src}">${o.src}</a></h4>
-                ${modal_header_close_button}
+export default (o) => {
+    return html`
+        <div class="modal-dialog fit-content" role="document">
+            <div class="modal-content fit-content">
+                <div class="modal-header">
+                    <h4 class="modal-title" id="message-versions-modal-label">${__('Image: ')}<a target="_blank" rel="noopener" href="${o.src}">${o.src}</a></h4>
+                    ${modal_header_close_button}
+                </div>
+                <div class="modal-body modal-body--image fit-content">
+                    <img class="chat-image" src="${o.src}" @load=${o.onload}>
+                </div>
+                <div class="modal-footer">${modal_close_button}</div>
             </div>
-            <div class="modal-body modal-body--image fit-content">
-                <img class="chat-image" src="${o.src}"/>
-            </div>
-            <div class="modal-footer">${modal_close_button}</div>
-        </div>
-    </div>
-`;
+        </div>`;
+}