fix aspect ratio bug

docs/resources/changelog.md

@@ -13,6 +13,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where the tooltip would show briefly when clicking a disabled `<sl-range>`
 - Fixed a bug that caused a console error when `<sl-range>` was used
 - Fixed a bug where the `nav` part in `<sl-tab-group>` was on the incorrect element [#563](https://github.com/shoelace-style/shoelace/pull/563)
+- Fixed a bug where non-integer aspect ratios were calculated incorrectly in `<sl-responsive-media>`
 - Updated to Bootstrap Icons to 1.6.1
 
 ## 2.0.0-beta.57

src/components/responsive-media/responsive-media.ts

@@ -24,8 +24,8 @@ export default class SlResponsiveMedia extends LitElement {
 
   render() {
     const split = this.aspectRatio.split(':');
-    const x = parseInt(split[0]);
-    const y = parseInt(split[1]);
+    const x = parseFloat(split[0]);
+    const y = parseFloat(split[1]);
     const paddingBottom = x && y ? `${(y / x) * 100}%` : '0';
 
     return html`