From c269ae47d456daf56ee60782bab4304c0d2b2f70 Mon Sep 17 00:00:00 2001 From: Jakub Zomerfeld Date: Thu, 3 Apr 2025 16:29:40 +0200 Subject: [PATCH 1/2] Update display-responsive-iframe-maintaining-aspect-ratio.md Use modern way to achieve aspect-ratio without any hacks and workarounds. --- ...ponsive-iframe-maintaining-aspect-ratio.md | 23 +++++-------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/css/display-responsive-iframe-maintaining-aspect-ratio.md b/css/display-responsive-iframe-maintaining-aspect-ratio.md index 1c9292b4..d9e80fa8 100644 --- a/css/display-responsive-iframe-maintaining-aspect-ratio.md +++ b/css/display-responsive-iframe-maintaining-aspect-ratio.md @@ -1,4 +1,4 @@ -# Display Responsive iframe Maintaining Aspect Ratio +# Display Responsive iframe Maintaining Aspect Ratio modern way Generally when rendering an iframe, you'll specify the `width` and `height` properties to give it a fixed display size. @@ -6,9 +6,8 @@ properties to give it a fixed display size. You can make the iframe responsively expand to the full width of its parent while maintaining its aspect ratio using a little CSS. -First, remove the `width` and `height` properties. - -Second, add a wrapping iframe container: +1. First, remove the `width` and `height` properties. +2. Second, add a wrapping iframe container: ```html
@@ -16,23 +15,13 @@ Second, add a wrapping iframe container:
``` -Third, sprinkle on a little CSS to make it responsive: +3. Sprinkle on a little CSS to make it responsive: ```css .iframe-container { - position: relative; - overflow: hidden; - /* 16:9 aspect ratio */ - padding-top: 56.25%; -} - -.iframe-container iframe { - position: absolute; width: 100%; - height: 100%; - top: 0; - left: 0; - border: 0; + aspect-ratio: 16 / 9; + border: 0; // optional } ``` From 3719b4943ae79ff3a740d5980c81e7254536296e Mon Sep 17 00:00:00 2001 From: Jakub Zomerfeld Date: Thu, 3 Apr 2025 16:32:59 +0200 Subject: [PATCH 2/2] Update display-responsive-iframe-maintaining-aspect-ratio.md --- css/display-responsive-iframe-maintaining-aspect-ratio.md | 1 - 1 file changed, 1 deletion(-) diff --git a/css/display-responsive-iframe-maintaining-aspect-ratio.md b/css/display-responsive-iframe-maintaining-aspect-ratio.md index d9e80fa8..3106dd9c 100644 --- a/css/display-responsive-iframe-maintaining-aspect-ratio.md +++ b/css/display-responsive-iframe-maintaining-aspect-ratio.md @@ -21,7 +21,6 @@ while maintaining its aspect ratio using a little CSS. .iframe-container { width: 100%; aspect-ratio: 16 / 9; - border: 0; // optional } ```