サイズ可変で縦横比固定のブロック要素をcssのみで実現する方法Htmlでサイズ可変で縦横比固定のブロック要素を実現する方法を模索していたところ、 ちょっと独特な方法ですが可能なようです。 こちらのページに書かれていました。 日本語訳がちょっとおかしなことになっているので転載。 以下は幅によって高さが決まるタイプのコード。 html <div class="aspectwrapper"> <div class="content"> 内容… </div> </div> css .aspectwrapper{ position: relative; } .aspectwrapper:after{//beforeでもよい padding-top: 75%;//幅に対する高さの割合 display: block; content: ""; } .aspectwrapper > .content{ position: absolute; top: 0px; le
