UX: Use aspect ratio to calculate width and height precisely

Followup on 1da265d

app/assets/javascripts/discourse/components/cdn-img.js.es6

@@ -6,5 +6,12 @@ export default Ember.Component.extend({
   @computed("src")
   cdnSrc(src) {
     return Discourse.getURLWithCDN(src);
+  },
+
+  @computed("width", "height")
+  style(width, height) {
+    if (width && height) {
+      return Ember.String.htmlSafe(`--aspect-ratio: ${width / height};`);
+    }
   }
 });

app/assets/javascripts/discourse/templates/components/cdn-img.hbs

@@ -1,3 +1,5 @@
 {{#if src}}
-  <img src={{cdnSrc}} class={{class}} width={{width}} height={{height}}>
+  <div class="{{class}} aspect-image" style={{style}}>
+    <img src={{cdnSrc}} width={{width}} height={{height}}>
+  </div>
 {{/if}}

app/assets/stylesheets/common/base/category-list.scss

@@ -41,13 +41,21 @@
       width: 100%;
     }
 
-    .logo {
+    .logo.aspect-image img {
       display: block;
       width: auto;
       height: 40px;
       margin: 0 auto 1em auto;
     }
 
+    @supports (--custom: property) {
+      .logo.aspect-image img {
+        --height: 40px;
+        width: calc(var(--height) * var(--aspect-ratio));
+        max-width: 100%;
+      }
+    }
+
     h3 .fa {
       color: $primary;
     }

app/assets/stylesheets/desktop/topic-list.scss

@@ -221,11 +221,31 @@ button.dismiss-read {
   clear: both;
 }
 
-.category-logo {
-  width: auto;
-  max-height: 150px;
+.category-logo.aspect-image {
   float: left;
   margin: 0.25em 1em 0.5em 0;
+
+  img {
+    width: auto;
+    max-height: 150px;
+  }
+}
+
+@supports (--custom: property) {
+  .category-logo.aspect-image {
+    --max-height: 150px;
+    max-height: var(--max-height);
+    width: calc(var(--max-height) * var(--aspect-ratio));
+    max-width: 25%;
+    height: auto;
+
+    img {
+      width: 100%;
+      height: inherit;
+      max-width: initial;
+      max-height: initial;
+    }
+  }
 }
 
 /* Tablet (portrait) ----------- */

app/assets/stylesheets/mobile/topic-list.scss

@@ -478,12 +478,32 @@ ol.category-breadcrumb {
   padding-top: 10px;
 }
 
-.category-logo {
+.category-logo.aspect-image {
   display: block;
-  width: auto;
-  max-width: 100%;
-  max-height: 150px;
-  padding: 8px 0;
+  margin: 8px 0;
+
+  img {
+    width: auto;
+    max-width: 100%;
+    max-height: 150px;
+  }
+}
+
+@supports (--custom: property) {
+  .category-logo.aspect-image {
+    --max-height: 150px;
+    max-height: var(--max-height);
+    width: calc(var(--max-height) * var(--aspect-ratio));
+    max-width: 100%;
+    height: auto;
+
+    img {
+      width: 100%;
+      height: inherit;
+      max-width: initial;
+      max-height: initial;
+    }
+  }
 }
 
 button.dismiss-read {