[Update: Although I discovered this trick independently, I’ve since learned that Thierry Koblentz beat me to it. You can find his 2009 article on A List Apart. Credit where credit is due.] I know this is an old question, but I encountered a similar problem that I did solve only with CSS. Here is my … Read more
Updated 2020… Bootstrap 5 In Bootstrap 5 (alpha) there is a new -xxl- size: col-* – 0 (xs) col-sm-* – 576px col-md-* – 768px col-lg-* – 992px col-xl-* – 1200px col-xxl-* – 1400px Bootstrap 5 Grid Demo Bootstrap 4 In Bootstrap 4 there is a new -xl- size, see this demo. Also the -xs- infix … Read more
Just create a wrapper <div> with a percentage value for padding-bottom, like this: .demoWrapper { padding: 10px; background: white; box-sizing: border-box; resize: horizontal; border: 1px dashed; overflow: auto; max-width: 100%; height: calc(100vh – 16px); } div { width: 100%; padding-bottom: 75%; background: gold; /** <– For the demo **/ } <div class=”demoWrapper”> <div></div> </div> It … Read more
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container. If the container is the body, what you are looking for is Viewport-percentage lengths: The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial … Read more