Height depends on width examples.

by kanonji

HTML

<h1>Height depends on width examples.</h1>
<hr/>
<div id="container">
    <h2>Original image.</h2>
    <p>Image set as background. background-size: 100%; background-repeat: no-repeat;</p>
    <img src="http://kanonji.info/dummyimage/200x50/333/ccc"/>
    
    <hr/>
    
    <h3>width: 100%; height: 50% of width</h3>
    <div class="box width-100p height-50p">foo</div>
    <h3>width: 50%; height: 50% of width</h3>
    <div class="box width-50p height-50p">foo</div>
    <h3>width: 100%; height: 15% of width</h3>
    <div class="box width-100p height-15p">foo</div>
    <h3>width: 50%; height: 15% of width</h3>
    <div class="box width-50p height-15p">foo</div>
    
    <hr/>
    
    <h3>width: 300px; height: 15% of width</h3>
    <div class="box width-300 height-15p">foo</div>
    <h3>width: 300px; height: 50% of width</h3>
    <div class="box width-300 height-50p">foo</div>
    
    <hr/>
    
    <h3>width: 100px; height: 15% of width</h3>
    <div class="box width-100 height-15p">foo</div>
    <h3>width: 100px; height: 50% of width</h3>
    <div class="box width-100 height-50p">foo</div>
</div>
<hr/>
<p>Referenced: <a href="http://webrawl.org/equal-column-height-with-css/">CSS のみで高さを可変にして要素の比率を維持するテクニック - Webrawl</a></p>

CSS

.box{
    height: auto;
    color: white;
    background-color: gray;
    background-image: url(http://kanonji.info/dummyimage/200x50/333/ccc);
    background-size: 100%;
    background-repeat: no-repeat;
}
.box:before{
    content: " ";
    display: block;
    float: left;
}
.box:after{
    content: " ";
    display: table;
    clear: both;
}
.width-300{
    width: 300px;    
}
.width-100{
    width: 100px;    
}
.width-100p{
    width: 100%;    
}
.width-50p{
    width: 50%;    
}
.height-15p:before{
    padding-top: 15%;
}
.height-20p:before{
    padding-top: 20%;
}
.height-50p:before{
    padding-top: 50%;
}