abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-07 17:18:02 +00:00
Code Issues Projects Releases Wiki Activity

Merge 3719b4943a into 162a7ceea3

Browse Source
This commit is contained in:
Jakub Zomerfeld
2025-04-12 08:03:28 +08:00
committed by GitHub
parent 162a7ceea3 3719b4943a
commit d50e4299fa
1 changed files with 5 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
css/display-responsive-iframe-maintaining-aspect-ratio.md
View File

@@ -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` Generally when rendering an iframe, you'll specify the `width` and `height`
properties to give it a fixed display size. 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 You can make the iframe responsively expand to the full width of its parent
while maintaining its aspect ratio using a little CSS. while maintaining its aspect ratio using a little CSS.
First, remove the `width` and `height` properties. 1. First, remove the `width` and `height` properties.
2. Second, add a wrapping iframe container:
Second, add a wrapping iframe container:
```html ```html
<div class="iframe-container"> <div class="iframe-container">
@@ -16,23 +15,12 @@ Second, add a wrapping iframe container:
</div> </div>
``` ```
Third, sprinkle on a little CSS to make it responsive: 3. Sprinkle on a little CSS to make it responsive:
```css ```css
.iframe-container { .iframe-container {
position: relative;
overflow: hidden;
/* 16:9 aspect ratio */
padding-top: 56.25%;
}
.iframe-container iframe {
position: absolute;
width: 100%; width: 100%;
height: 100%; aspect-ratio: 16 / 9;
top: 0;
left: 0;
border: 0;
} }
``` ```