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

Merge 3719b4943a into a55fff68e1

Browse Source
This commit is contained in:
Jakub Zomerfeld
2025-04-13 07:46:16 +08:00
committed by GitHub
parent a55fff68e1 3719b4943a
commit e268150a79
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`
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
<div class="iframe-container">
@@ -16,23 +15,12 @@ Second, add a wrapping iframe container:
</div>
```
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;
}
```