Skip to content

Instantly share code, notes, and snippets.

@PadreZippo
Last active Mar 28, 2021
Embed
What would you like to do?
iframes with constant aspect ratios
.ratio-16-9,
.ratio-16-10,
.ratio-square {
display: block;
position: relative;
width: 100%;
height: 0;
}
.ratio-16-9 {
padding-top: 56.25%; /* This is your aspect-ratio */
}
.ratio-16-10 {
padding-top: 62.5%; /* This is your aspect-ratio */
}
.ratio-square {
padding-top: 100%; /* This is your aspect-ratio */
}
.ratio-inner {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- This iframe will always fill the parent width, but will remain at 16:9 aspect ratio -->
<div class="ratio-16-9">
<iframe class="ratio-inner" src="https://sketchfab.com/models/{{model_id}}/embed"></iframe>
</div>
<!-- This iframe will always fill the parent width, but will remain at 16:10 aspect ratio -->
<div class="ratio-16-10">
<iframe class="ratio-inner" src="https://sketchfab.com/models/{{model_id}}/embed"></iframe>
</div>
<!-- This iframe will always fill the parent width, but will remain a square -->
<div class="ratio-square">
<iframe class="ratio-inner" src="https://sketchfab.com/models/{{model_id}}/embed"></iframe>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment