0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Bootstrap/scss/_responsive-embed.scss
Mark Otto df2ca92d77 Use percentages in responsive embed modifiers
- Credit: @adammacias
- Originally proposed in #16499 with previous commit
2015-06-18 16:03:48 -07:00

43 lines
733 B
SCSS

//
// Responsive embed
// --------------------------------------------------
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
}
// Modifier class for 21:9 aspect ratio
.embed-responsive-21by9 {
padding-bottom: percentage(9 / 21);
}
// Modifier class for 16:9 aspect ratio
.embed-responsive-16by9 {
padding-bottom: percentage(9 / 16);
}
// Modifier class for 4:3 aspect ratio
.embed-responsive-4by3 {
padding-bottom: percentage(3 / 4);
}