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

Compare commits

base: abdullah:master
Branches Tags
abdullah:master abdullah:copilot/update-notes-push-task
...
compare: abdullah:d50e4299fa48e7cce72491a070fec9378d960931
Branches Tags
abdullah:master abdullah:copilot/update-notes-push-task

3 Commits
master ... d50e4299fa

Author SHA1 Message Date
Jakub Zomerfeld
d50e4299fa Merge 3719b4943a into 162a7ceea3 2025-04-12 08:03:28 +08:00
Jakub Zomerfeld
3719b4943a Update display-responsive-iframe-maintaining-aspect-ratio.md 2025-04-03 16:32:59 +02:00
Jakub Zomerfeld
c269ae47d4 Update display-responsive-iframe-maintaining-aspect-ratio.md 
Use modern way to achieve aspect-ratio without any hacks and workarounds.
 2025-04-03 16:29:40 +02:00
1 changed files with 5 additions and 17 deletions
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;
} }
``` ```