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

Update display-responsive-iframe-maintaining-aspect-ratio.md

Browse Source 
Use modern way to achieve aspect-ratio without any hacks and workarounds.
This commit is contained in:
Jakub Zomerfeld
2025-04-03 16:29:40 +02:00
committed by GitHub
parent a547b9cee2
commit c269ae47d4
1 changed files with 6 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
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,13 @@ 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;
border: 0; // optional
}
```