From 427978f61a3ba42d3cba8d96b1bfaba9a361da2a Mon Sep 17 00:00:00 2001
From: JustinTime42 <justincase18@msn.com>
Date: Mon, 21 Nov 2022 09:56:11 -0900
Subject: [PATCH 1/3] Added support for portrait size ratios

---
 src/Ratio.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Ratio.tsx b/src/Ratio.tsx
index 7ae03134e5..723b9458c7 100644
--- a/src/Ratio.tsx
+++ b/src/Ratio.tsx
@@ -38,7 +38,7 @@ const defaultProps = {
 
 function toPercent(num: number): string {
   if (num <= 0 || num > 100) return '100%';
-  if (num < 1) return `${num * 100}%`;
+  if (num < 5) return `${num * 100}%`;
   return `${num}%`;
 }
 

From 365d735eec12025d8123beaf267fb4f8c194dbe3 Mon Sep 17 00:00:00 2001
From: JustinTime42 <justincase18@msn.com>
Date: Fri, 25 Nov 2022 08:42:42 -0900
Subject: [PATCH 2/3] removed the 100% cap on the aspect ratio to allow
 portrait style size ratios

---
 src/Ratio.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Ratio.tsx b/src/Ratio.tsx
index 723b9458c7..7aad47dd53 100644
--- a/src/Ratio.tsx
+++ b/src/Ratio.tsx
@@ -37,8 +37,8 @@ const defaultProps = {
 };
 
 function toPercent(num: number): string {
-  if (num <= 0 || num > 100) return '100%';
-  if (num < 5) return `${num * 100}%`;
+  if (num <= 0) return '100%';
+  if (num < 1) return `${num * 100}%`;
   return `${num}%`;
 }
 

From 452b5283447919d6236fad24b273580eda3bf03d Mon Sep 17 00:00:00 2001
From: JustinTime42 <justincase18@msn.com>
Date: Fri, 25 Nov 2022 08:54:50 -0900
Subject: [PATCH 3/3] modified RatioSpec to allow aspect ratio greater than
 100%

---
 test/RatioSpec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/RatioSpec.tsx b/test/RatioSpec.tsx
index 6a364aacf4..b9ea21643c 100644
--- a/test/RatioSpec.tsx
+++ b/test/RatioSpec.tsx
@@ -49,7 +49,7 @@ describe('Ratio', () => {
     styleAttr.should.match(/--bs-aspect-ratio:[ ]*100%;/);
   });
 
-  it('should support use 100% as custom ratio if aspectRatio is greater than 100', () => {
+  it('should support aspectRatio greater than 100', () => {
     const { getByTestId } = render(
       <Ratio data-testid="test" aspectRatio={200}>
         <div />
@@ -57,6 +57,6 @@ describe('Ratio', () => {
     );
     const ratioElem = getByTestId('test');
     const styleAttr = ratioElem.getAttribute('style')!;
-    styleAttr.should.match(/--bs-aspect-ratio:[ ]*100%;/);
+    styleAttr.should.match(/--bs-aspect-ratio:[ ]*200%;/);
   });
 });