UX: wrap instagram images with aspect ratio

app/assets/stylesheets/common/base/onebox.scss

@@ -179,6 +179,23 @@ aside.onebox {
           margin-right: none;
         }
       }
+
+      // full size images for instagram, twitter, etc.
+      .aspect-image-full-size {
+        max-height: 500px;
+        width: calc(500px * var(--aspect-ratio));
+        max-width: 100%;
+
+        img {
+          width: 100%;
+          height: inherit;
+          max-width: initial;
+          max-height: initial;
+          float: none;
+          padding: 5px 5px 5px 5px;
+        }
+      }
+
       [style*="--aspect-ratio"] {
         position: relative;
       }
@@ -497,6 +514,7 @@ aside.onebox.stackexchange .onebox-body {
 .onebox.instagram {
   div.instagram-description {
     color: dark-light-choose($primary-medium, $secondary-medium);
+    padding-top: 10px;
   }
 }
 

lib/cooked_post_processor.rb

@@ -418,8 +418,10 @@ class CookedPostProcessor
       next if img["class"]&.include?('onebox-avatar')
 
       parent_class = img.parent && img.parent["class"]
-      if parent_class&.include?("onebox-body") && (width = img["width"].to_i) > 0 && (height = img["height"].to_i) > 0
+      width = img["width"].to_i
+      height = img["height"].to_i
 
+      if parent_class&.include?("onebox-body") && width > 0 && height > 0
         # special instruction for width == height, assume we are dealing with an avatar
         if (img["width"].to_i == img["height"].to_i)
           found = false
@@ -446,6 +448,11 @@ class CookedPostProcessor
           new_parent.first.add_child(img)
         end
 
+      elsif parent_class&.include?("instagram-images") && width > 0 && height > 0
+        img.remove_attribute("width")
+        img.remove_attribute("height")
+        img.parent["class"] = "aspect-image-full-size"
+        img.parent["style"] = "--aspect-ratio:#{width}/#{height};"
       end
     end
   end