div要素のアスペクト比を固定したい(例えば正方形) デザイン上、div要素のアスペクト比を1:1(正方形)などに固定したい、ということがある。 当たり前だが、以下のコードは動作しない。 <div style="width:100%; height:100%">hoge</div> 親要素が正方形でない限り当然、高さと幅はバラバラに評価されるため。 どうするの？ padding-topや-bottomの評価は、widthを基準に行われることを使う。ちょっとトリッキーだが… <div class="parent"> <div …