3 ms·
You (or others) may or may not know it is already possible in CSS as it is. To force 16:9: .DamnInteresting { position: relative; display: block; }
by lewiscollard 8y ago
You (or others) may or may not know it is already possible in CSS as it is. To force 16:9:
.DamnInteresting {
position: relative;
display: block;
}
.DamnInteresting::before {
content: '';
display: block;
/* 16:9 shim! */
padding-bottom: 56.25%;
}
.DamnInteresting img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Ugly, but it's easy to make a mixin (or similar) if you're using a preprocessor!
(The ::before element isn't stricly necessary; the padding can go on the .DamnInteresting element directly - just make sure .DamnInteresting is wrapped in a containing element of your desired width and you can even use inline styles for the padding shim.)
(Edit: a word)