Skip to content

Instantly share code, notes, and snippets.

@cwmanning
Last active December 20, 2015 14:38
Show Gist options
  • Save cwmanning/6147662 to your computer and use it in GitHub Desktop.
Save cwmanning/6147662 to your computer and use it in GitHub Desktop.
Flexible, 4:3 container with images that fill. Images 'letter box' if not 4:3
.slide-media {
background: #000;
text-align: center;
width: 100%;
// Intrisic Ratios. Used here to produce a flexible 4:3 box
// http://alistapart.com/article/creating-intrinsic-ratios-for-video
height: 0;
padding-bottom: 75%;
position: relative;
.slide-media-inner {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
img {
display: inline;
max-height: 100%;
max-width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment