レスポンシブサイトを作成するときに、アスペクト比（縦横比）を保ったまま拡大縮小するブロックを作成したい場合があります。簡単そうで結構ハマるところです。
今回はアスペクト比を保ちながら拡大縮小できるブロック領域の作成テクニックです。
アスペクト比を保ちながら拡大縮小できるブロックのサンプル
HTMLコード
<div class="outer"> <div class="inner"><img src="ajisai1.png" alt="アジサイの花の写真"></div> </div>
HTMLでは画像を「div」で２重に囲んでおきます。「divタグ」にはそれぞれ適切なクラス名をつけておきます。今回は「.outer」と「.inner」としました。
CSSコード
img{
width:100%;
height:auto;
}
.outer {
position: relative;
width: 35%;
margin:auto;
background:#ccc;
}
.outer::before {
content:"";
display: block;
padding-top: 70%; /* 高さを幅の70%に固定 */
}
.inner {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
text-align: center;
}
まず「img」の「width」を「100%」にすることでフルードイメージ化します。
次に、外側の「div」である「.outer」に対して幅の指定と 「position: relative」を設定しておきます。
「position」を使用したのは入れ子状態の「div.inner」に「absolute」を指定して絶対配置したいためです。
親要素を基準にしたい場合は、親要素に対して「position: relative」を設定する必要があります。
さらに、「width:35%」でリキッドタイプの幅を設定して「margin:auto」で中央揃えを行いました。
「.outer::before」は擬似要素です。擬似クラスと似ていますがその違いを主張するためにコロンを二つも付けています。ただし、擬似クラス同様にコロン一つでも間違いではありません。
擬似要素の 「content:””」は新しい要素を作成するもので、通常「::before」や「::after」の擬似要素には必ず登場するプロパティです。このサンプルでは「.outer」の最前に新たな要素を加えていますが、その要素は何も含んでいません。そして「display:block」の性質を持たせています。
さらに「padding-top」で「70%」の値を指定しています。ここが今回のアスペクト比を決める重要なポイントになります。
「padding-top」と「padding-bottom」の値を%指定するとその値は「width」を基準にした値になることです。この規則をうまく利用してアスペクト比を決めるわけです。
「padding-top」または「padding-bottom」どちらで設定しても構いませんが、この値をパーセント指定することはつまりアスペクト比を決めることになるわけです。
これでブラウザを伸び縮みさせてみると対象のブロック領域はアスペクト比を保ったまま拡大縮小するようになります。
次にこのブロック領域の中に表示させたいコンテンツを入れ込む必要があります。
つまり「padding領域」にコンテンツをはめ込むわけです。
もちろん通常フローではそのようなことはできませんので、「position」を活用するわけです。
「.inner」 に対して「position: absolute」を設定します。親要素の「.outer」には「position:rerative」を設定していますので、親要素を基準に配置されるようになります。
さて、ここでテクニックですが、「absolute」に伴う座標の設定ですが、「top,left,bottom,right」それぞれの値を0にすると親要素のちょうど真ん中（垂直方向、水平方向ともに中央）に表示されます。
レスポンシブサイト作成のときに重宝する技です。少し練習をしておくとよいでしょう。
