aleidk
c84ad03d4c
Affected files: .obsidian/app.json .obsidian/graph.json .obsidian/plugins/obsidian-omnivore/data.json .obsidian/plugins/update-time-on-edit/data.json 01. Projects/Fuuka/Outline.md 01. Projects/Juuno/Outline.md 01. Projects/Renuncia/Renuncia.md 02. Areas/Dotfiles/dotfiles tasks.md 02. Areas/Escape Latam/Canada.md 02. Areas/Escape Latam/Comparación de Paises.md 02. Areas/Escape Latam/Escapar de Latam.md 02. Areas/Escape Latam/New Zeldand.md 03. Resources/Development/Feature shipment checklist.md 03. Resources/Development/Fix messy commits.md 03. Resources/Development/Git.md 03. Resources/Development/Iframes.md 03. Resources/Development/Revert old changes in a codebase.md 03. Resources/Development/Search for a bug.md 03. Resources/Notetaking/Habits.md Read Later/2024-02-12 - Debouncing in JavaScript – Explained by Building Auto-Complete Functionality in React.md notes/Git.md
24 lines
450 B
Markdown
24 lines
450 B
Markdown
---
|
|
created: 2024-02-20 11:43
|
|
updated: 2024-02-20 11:45
|
|
---
|
|
|
|
## How to make an Iframe 100% it's parent width while maintaining the aspect ratio
|
|
|
|
In this example, we need to wrap the iframe in a container class and provide the following styles:
|
|
|
|
```css
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0;
|
|
padding-bottom: 56.25%;
|
|
}
|
|
iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
```
|