横幅にあわせて正方形のエリアを作って画像を当てはめたいときの簡単なCSSこのごろよく使っているのでメモ。 要点としては次の２つでやってます – 正方形＝親要素の横幅にあわせて高さを自動調整 – 画像＝背景画像にする＋background-sizeプロパティを調整 ベースのHTML <div class=”square-frame”> <a href=”#” ><span class=”square-content”></span></a> </div> まずは枠のCSS ＊枠線はわかりやすいように設定しています .square-frame { border: 1px dotted #999; } .square-content { display: block; height: 0; width: 100%; padding-bottom: 100%; } 横幅:120px指定 長方形にしたいときは、比率を考えてpadding-bottomの%を変えてやります
