diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 27e32679f..92069c41f 100644
--- a/docs/resources/changelog.md
+++ b/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
diff --git a/src/components/responsive-media/responsive-media.ts b/src/components/responsive-media/responsive-media.ts
index c4058f15d..1463d0621 100644
--- a/src/components/responsive-media/responsive-media.ts
+++ b/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`