 <p>You can't set the ratio, but there's always <code>padding-bottom</code>!</p> <pre><code>div { width: 100%; padding-bottom: 75%; } </code></pre> <p>This code will set <code>div</code> to 4:3 ratio</p> <p>For 16:9 ratio use <code>padding-bottom: 56.25%</code></p> <p><strong>An edit after re-read</strong></p> <p>What if I suggest using a div inside a div?</p> <pre><code>&lt;div class="a"&gt; &lt;div class="b"&gt; &lt;/div&gt; &lt;/div&gt; &lt;style&gt; .a{ width:100%; padding-bottom: 75%; background-color: red; position: relative; } .b{ width: 100%; max-height: 100%; background-color: white; position: absolute; overflow: hidden; } &lt;/style&gt; </code></pre> <p>Put the content inside <code>div.b</code> and it will never exceed the 75%</p>