縦横比を一定にするCSS

CSSだけでアスペクト比を固定するテク
https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d


img

HTML

<img src="http://mrg.bz/Gl2K6Z" />

CSS

img {
width: 100%;
height: auto;
}


divやpなどのブロック要素の場合

HTML

<div id="wrapper">
<div id="content">hogehoge fugafuga</div>
</div>

CSS

#wrapper {
position: relative;
width: 100%;
}
#wrapper:before {
content:"";
display: block;
padding-top: 75%; /* 高さを幅の75%に固定 */
}
#content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}


高さの比率 ÷ 幅の比率 × 100

上の例では4:3 3/4*100で75


iframeの場合

HTML

<div id="wrapper">
<iframe id="content" src="https://player.vimeo.com/video/98746172"
frameborder="0"></iframe>
</div>

CSS

#wrapper {
position: relative;
width: 100%;
}
#wrapper:before {
content:"";
display: block;
padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}