diff --git a/app/javascript/src/javascripts/uploads.js.erb b/app/javascript/src/javascripts/uploads.js.erb
index 7520e6b2e..c445ffe0f 100644
--- a/app/javascript/src/javascripts/uploads.js.erb
+++ b/app/javascript/src/javascripts/uploads.js.erb
@@ -19,16 +19,7 @@ Upload.initialize_all = function() {
   }
 
   if ($("#c-uploads").length) {
-    if ($("#image").prop("complete")) {
-      this.initialize_image();
-    } else {
-      $("#image").on("error.danbooru", (e) => {
-        $("#upload-image").hide();
-        $("#scale-link").hide();
-        $("#iqdb-similar").hide();
-      });
-      $("#image").on("load.danbooru", this.initialize_image);
-    }
+    this.initialize_image();
     this.initialize_similar();
     this.initialize_submit();
     $("#similar-button").click();
@@ -93,14 +84,69 @@ Upload.initialize_similar = function() {
   });
 }
 
-Upload.update_scale = function() {
-  var $image = $("#image");
-  var ratio = $image.data("scale-factor");
-  if (ratio < 1) {
-    $("#scale").html("Scaled " + parseInt(100 * ratio) + "% (original: " + $image.data("original-width") + "x" + $image.data("original-height") + ")");
+Upload.initialize_image = function() {
+  let $image = $("#image");
+
+  if ($image.prop("complete")) {
+    Upload.update_scale();
   } else {
-    $("#scale").html("Original: " + $image.data("original-width") + "x" + $image.data("original-height"));
+    $image.on("load.danbooru", Upload.update_scale);
   }
+
+  $(window).on("resize.danbooru", Upload.update_scale);
+  $(document).on("click.danbooru", "#image", Upload.toggle_size);
+  $(document).on("click.danbooru", "#upload-image-view-small", Upload.view_small);
+  $(document).on("click.danbooru", "#upload-image-view-large", Upload.view_large);
+  $(document).on("click.danbooru", "#upload-image-view-full", Upload.view_full);
+}
+
+Upload.no_image_available = function(e) {
+  $("#a-new").addClass("no-image-available");
+}
+
+Upload.view_small = function(e) {
+  $("#image").addClass("fit-width fit-height");
+  $("#a-new").attr("data-image-size", "small");
+  Upload.update_scale();
+  e.preventDefault();
+}
+
+Upload.view_large = function(e) {
+  $("#image").removeClass("fit-height").addClass("fit-width");
+  $("#a-new").attr("data-image-size", "large");
+  Upload.update_scale();
+  e.preventDefault();
+}
+
+Upload.view_full = function(e) {
+  $("#image").removeClass("fit-width fit-height");
+  $("#a-new").attr("data-image-size", "full");
+  Upload.update_scale();
+  e.preventDefault();
+}
+
+Upload.toggle_size = function(e) {
+  let window_aspect_ratio = $(window).width() / $(window).height();
+  let image_aspect_ratio = $("#image").width() / $("#image").height();
+  let image_size = $("#a-new").attr("data-image-size");
+
+  if (image_size === "small" && image_aspect_ratio >= window_aspect_ratio) {
+    Upload.view_full(e);
+  } else if (image_size === "small" && image_aspect_ratio < window_aspect_ratio) {
+    Upload.view_large(e);
+  } else if (image_size === "large") {
+    Upload.view_small(e);
+  } else if (image_size === "full") {
+    Upload.view_small(e);
+  }
+}
+
+Upload.update_scale = function() {
+  let $image = $("#image");
+  let natural_width = $image.get(0).naturalWidth;
+  let natural_height = $image.get(0).naturalHeight;
+  let scale_percentage = Math.round(100 * $image.width() / natural_width);
+  $("#upload-image-metadata-resolution").html(`(${natural_width}x${natural_height}, resized to ${scale_percentage}%)`);
 }
 
 Upload.fetch_data_manual = function(e) {
@@ -115,26 +161,6 @@ Upload.fetch_data_manual = function(e) {
   e.preventDefault();
 }
 
-Upload.initialize_image = function() {
-  var $image = $("#image");
-  if (!$image.length) {
-    return;
-  }
-  var width = $image.width();
-  var height = $image.height();
-  if (!width || !height) {
-    // we errored out
-    return;
-  }
-  $("#no-image-available").hide();
-  $image.data("original-width", width);
-  $image.data("original-height", height);
-  Post.resize_image_to_window($image);
-  Post.initialize_post_image_resize_to_window_link();
-  Upload.update_scale();
-  $("#image-resize-to-window-link").on("click.danbooru", Upload.update_scale);
-}
-
 Upload.toggle_commentary = function() {
   if ($(".artist-commentary").is(":visible")) {
     $("#toggle-artist-commentary").text("show »");
diff --git a/app/javascript/src/styles/specific/uploads.scss b/app/javascript/src/styles/specific/uploads.scss
index c1c6ef63a..aeb5226ad 100644
--- a/app/javascript/src/styles/specific/uploads.scss
+++ b/app/javascript/src/styles/specific/uploads.scss
@@ -1,5 +1,49 @@
 div#c-uploads {
   div#a-new {
+    #no-image-available {
+      display: none;
+    }
+
+    &.no-image-available {
+      #upload-image-metadata, #image, #iqdb-similar {
+        display: none;
+      }
+
+      #no-image-available {
+        display: block !important;
+      }
+    }
+
+    &[data-image-size="small"] {
+      #image {
+        cursor: zoom-in;
+      }
+
+      a#upload-image-view-small {
+        font-weight: bold;
+      }
+    }
+
+    &[data-image-size="large"] {
+      #image {
+        cursor: zoom-out;
+      }
+
+      a#upload-image-view-large {
+        font-weight: bold;
+      }
+    }
+
+    &[data-image-size="full"] {
+      #image {
+        cursor: zoom-out;
+      }
+
+      a#upload-image-view-full {
+        font-weight: bold;
+      }
+    }
+
     .artist-commentary {
       margin-top: 1em;
     }
diff --git a/app/views/uploads/_image.html.erb b/app/views/uploads/_image.html.erb
index c43a18560..7b0a2208e 100644
--- a/app/views/uploads/_image.html.erb
+++ b/app/views/uploads/_image.html.erb
@@ -1,23 +1,22 @@
 <% if params[:url] %>
+  <p id="upload-image-metadata">
+    <strong>Size</strong>
+    <% if @remote_size %>
+      <span id="upload-image-metadata-filesize"><%= number_to_human_size(@remote_size) %></span>
+    <% end %>
+    <span id="upload-image-metadata-resolution"></span>
+    <span id="upload-image-metadata-size-links">
+      (<a id="upload-image-view-small" href="">small</a> | <a id="upload-image-view-large" href="">large</a> | <a id="upload-image-view-full" href="">full</a>)
+    </span>
+  </p>
+
   <div id="upload-image">
     <% if ImageProxy.needs_proxy?(@source.image_url) %>
-      <%= tag.img src: image_proxy_uploads_path(url: @source.image_url), title: "Preview", id: "image" %>
+      <%= tag.img src: image_proxy_uploads_path(url: @source.image_url), title: "Preview", id: "image", class: "fit-width fit-height", onerror: "Danbooru.Upload.no_image_available()", "data-shortcut": "z" %>
     <% elsif @source.image_url.present? %>
-      <%= tag.img src: @source.image_url, title: "Preview", id: "image", referrerpolicy: "no-referrer" %>
+      <%= tag.img src: @source.image_url, title: "Preview", id: "image", referrerpolicy: "no-referrer", class: "fit-width fit-height", onerror: "Danbooru.Upload.no_image_available()", "data-shortcut": "z" %>
     <% end %>
+
+    <div id="no-image-available">No image preview available</div>
   </div>
-
-  <ul id="upload-image-metadata">
-    <li id="no-image-available"><em>No image preview available</em></li>
-
-    <% if @remote_size %>
-      <li><strong>Size:</strong> <%= number_to_human_size(@remote_size) %></li>
-    <% end %>
-
-    <% if params[:ref] %>
-      <li><strong>Referrer:</strong> <%= params[:ref] %></li>
-    <% end %>
-
-    <li id="scale-link"><span id="scale"></span> (<%= link_to "toggle size", "#", :id => "image-resize-to-window-link" %>)</li>
-  </ul>
 <% end %>
diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb
index a09e3e1dc..981e90edd 100644
--- a/app/views/uploads/new.html.erb
+++ b/app/views/uploads/new.html.erb
@@ -1,5 +1,5 @@
 <div id="c-uploads">
-  <div id="a-new">
+  <div id="a-new" data-image-size="small">
     <h1>Upload</h1>
 
     <% if !CurrentUser.user.upload_limit.limited? %>