FIX: Show quoted images correctly. (#8391)

This commit attempts to fix two issues that affect quoted images.

The first issue is observed while loading. The 'position: absolute' CSS
property makes 'width' and 'height' behave differently. Instead of using
the known image size, this makes it use the computed width and height of
the image, which should be the right size, as shown to the user.

The second issue is caused by 'object-fit: cover' property which trimmed
the left and right sides of wide pictures to make them fit inside the
quote.

app/assets/javascripts/discourse/lib/lazy-load-images.js.es6

@@ -56,10 +56,16 @@ function show(image) {
     copyImg.className = imageData.className;
 
     let inOnebox = false;
+    let inQuote = false;
     for (let element = image; element; element = element.parentElement) {
+      if (element.tagName === "ARTICLE") {
+        break;
+      }
       if (element.classList.contains("onebox")) {
         inOnebox = true;
-        break;
+      }
+      if (element.tagName === "BLOCKQUOTE") {
+        inQuote = true;
       }
     }
 
@@ -68,6 +74,18 @@ function show(image) {
       copyImg.style.height = `${imageData.height}px`;
     }
 
+    if (inQuote && imageData.width && imageData.height) {
+      const computedStyle = window.getComputedStyle(image);
+      const width = parseInt(computedStyle.width, 10);
+      const height = width * (imageData.height / imageData.width);
+
+      image.width = width;
+      image.height = height;
+
+      copyImg.style.width = `${width}px`;
+      copyImg.style.height = `${height}px`;
+    }
+
     image.parentNode.insertBefore(copyImg, image);
   } else {
     image.classList.remove("d-lazyload-hidden");

app/assets/stylesheets/common/base/topic-post.scss

@@ -233,8 +233,6 @@ blockquote {
   // !important here otherwise it won't work.
   img {
     max-width: 100% !important;
-    object-fit: cover;
-    object-position: top;
   }
 }