横幅にあわせて正方形のエリアを作って画像を当てはめたいときの簡単なCSS

by

このごろよく使っているのでメモ。

要点としては次の２つでやってます
– 正方形＝親要素の横幅にあわせて高さを自動調整
– 画像＝背景画像にする＋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指定

 
横幅：25%指定

 
長方形にしたいときは、比率を考えてpadding-bottomの%を変えてやります。

背景設定
背景はspanのbackground-imageで設定。フルフルで利用できるようにbackground-sizeはcoverにしておきます。
* わかりやすいように背景CSSを別classにしていますので、ベースHTMLのspan側にclass指定を追加しました。

.bg-sample {
    background-image:url(http://www.nalabo.net/blog/wp-content/uploads/2017/05/IMG_9537.jpg);
    background-size: cover;
}

横幅:120px指定

 
横幅：25%指定

 
25%指定のほうは、ブラウザの横幅に応じて自動的に大きさが調節されます。メディアクエリーとあわせて、レスポンシブコーディング時に結構使い勝手良く、正方形画像表示ができるCSSでした。