Kind of ran across this by accident today. I have looked for solutions for this from time to time and always ended up using some sort of hack, but this works, no hacks.
I need this when I want a rectangle to keep it’s ratio without having an image nested inside, but instead using the image as the background.
Use case for this today was a responsive Flexslider implementation with a different set of images with different ratios shown with a media query for smaller devices.
This works with and without box-sizing but if you look at the element in your inspector, box-sizing makes more sense.
There may already be a solution or the same post somewhere else, if so, let me know.
.scales { box-sizing: border-box; max-width: 100%; padding-top: 25%; border: 1px solid red; }
<div class="scales"></div>
Squeeze your browser and check it out. I didn’t test in every browser.
Be the first to leave a comment. Don’t be shy.