diff --git a/app/components/media_asset_component/media_asset_component.html.erb b/app/components/media_asset_component/media_asset_component.html.erb
index 18145815a..d1f0c59e0 100644
--- a/app/components/media_asset_component/media_asset_component.html.erb
+++ b/app/components/media_asset_component/media_asset_component.html.erb
@@ -1,4 +1,4 @@
-<div class="media-asset-container media-asset-container-fit-height flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px">
+<div class="media-asset-container media-asset-container-fit-height flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px; --media-asset-width: <%= image_width %>; --media-asset-height: <%= image_height %>;">
   <%= header %>
 
   <div class="media-asset-component relative max-h-inherit overflow-hidden <%= inner_classes %>">
@@ -15,13 +15,13 @@
     <% elsif !media_asset.active? || !policy(media_asset).can_see_image? %>
       <p>Image unavailable.</p>
     <% elsif is_image? %>
-      <%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" -%>
+      <%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image" -%>
     <% elsif is_video? %>
-      <%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" %>
+      <%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image" %>
     <% elsif is_ugoira? %>
-      <%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" %>
+      <%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image" %>
     <% elsif is_flash? %>
-      <%= tag.div "data-swf": variant(:original).file_url, class: "media-asset-image ruffle-container max-h-inherit max-w-full h-full w-auto select-none" %>
+      <%= tag.div "data-swf": variant(:original).file_url, class: "media-asset-image ruffle-container" %>
     <% end %>
   </div>
 
diff --git a/app/components/media_asset_component/media_asset_component.scss b/app/components/media_asset_component/media_asset_component.scss
index dcaa5ad90..4a72c7e65 100644
--- a/app/components/media_asset_component/media_asset_component.scss
+++ b/app/components/media_asset_component/media_asset_component.scss
@@ -34,8 +34,22 @@
     }
   }
 
+  .media-asset-image {
+    user-select: none;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: inherit;
+  }
+
   &.media-asset-container-fit-height {
     max-height: calc(100vh - var(--header-visible-height));
     justify-content: center;
+
+    .media-asset-component {
+      aspect-ratio: var(--media-asset-width) / var(--media-asset-height);
+      height: max-content;
+      height: intrinsic; // XXX Safari-only hack to make images correct height on upload page. I have no idea how this works.
+    }
   }
 }
diff --git a/app/views/media_assets/show.html.erb b/app/views/media_assets/show.html.erb
index e295cff4d..7ba6c7bd0 100644
--- a/app/views/media_assets/show.html.erb
+++ b/app/views/media_assets/show.html.erb
@@ -99,7 +99,7 @@
         <% end %>
       </div>
 
-      <div class="media-asset-sidebar md:w-360px">
+      <div class="media-asset-sidebar flex-none md:w-360px">
         <% if @media_asset.ai_tags.present? %>
           <div>
             <h3>Tags</h3>