要素を背景イメージの大きさに合わせる【CSS/SCSS】

css

要素に設定した背景イメージを表示させるには、その要素に幅と高さの設定が必要です。
幅と高さをイメージにフィットさせたい場合、幅は設定できても、高さを設定できない場合が多いと思います。理由は、レスポンシブデザインだと要素そのものが可変になるので、固定値を指定できないためです。

今回、レスポンシブにも対応した背景イメージの設定方法を調べたのでメモ。
また、こちらの技法を応用してマウスホバーするとイメージが拡大するサンプルを作成しました。

擬似要素に高さをパーセントで設定する

結論から言うと、背景イメージを設定した擬似要素にpadding-topで高さを指定します。
指定する高さは画像のアスペクト比によって異なります。

指定する高さの計算方法

例えば以下画像の場合、計算式は次の通りとなります。

＜計算式＞

縦(px) ÷ 横(px) × 100

上記の計算で、縦426pxは横640pxの66.5625%という値を求めることができます。

この値を擬似要素に設定します。

実際に設定してみる

HTML

<!-- イメージを設定する要素 -->
<div class="bg_img item01"></div>

CSS

//背景画像設定 共通
.bg_img {
    background-repeat:no-repeat;
    background-position:center;
}
.bg_img::after {
      content:"";
      display:block;
    }
}
//背景画像設定 個別
.bg_img.item01 {
    max-width:640px;
    background-image:url("<path>/images/photo1.jpg");
}
.bg_img.item01::after {
      padding-top: 66.5625%;
    }
}

背景画像の共通の設定はbg_imgで設定しておきます。
個別画像のURLはitem01に設定しています。

after要素のpadding-topに先ほど計算した値、66.5625%を設定しています。
ポイントは、after要素のdispayをblockに設定しておくことです。

これでレスポンシブでも表示が崩れることなく表示されると思います。
codepenで実際の表示を確認できます。※codepenのロゴマークをクリックすると大きな画面で確認できます。

See the Pen bg_img_height by donguri2020 (@m-ke) on CodePen.

SCSSで記述していますが、コード内容は先ほどと同じです。

マウスホバーすると拡大するサンプル

イメージを背景として設定すると、表現の幅が広がります。
今回、ブログなどでよく見かけるマウスをホバーするとイメージが拡大するサンプルを作成しました。

実際の動作はこちらでご確認ください！（別ウィンドウが開きます）

デモを確認する

ソースコードを確認する

HTML

<div class="item_wrap">
    <div class="img_zoom bg_img66 hover-cover item1"></div>
    <div class="img_zoom bg_img66 hover-cover item2"></div>
    <div class="img_zoom bg_img66 hover-cover item3"></div>
    <div class="img_zoom bg_img66 hover-cover item4"></div>
    <div class="img_zoom bg_img66 hover-cover item5"></div>
</div>

SCSS

.item_wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    .img_zoom {
        flex:0 1 32.5%;
        margin-top: 13px;
        overflow: hidden;
        transition: background-size 0.3s ease;
        position: relative;
        cursor: pointer;
        @for $i from 1 through 5 {
            &.item#{$i} {
                background-image:url("./images/photo#{$i}.jpg");
            }
        }
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        &:hover {
            background-size: 120%;
        }
    }
    // カラム位置調整
    &:last-child::after {
        content: "";
        width: 32.5%;
        height: 0;
    }
}

// 背景画像設定（アスペクト3:2）
.bg_img66 {
    position: relative;
    &::after {
        content: "";
        display: block;
        padding-top: 66.6%;
    }
}
// hoverした時の背景色
.hover-cover {
    &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: background-color 0.3s ease;
    }
    &:hover::before {
        background-color: rgba(0, 0, 0, 0.4);
    }
}

classごとに設定する機能を分けます。
マウスホバーした時に画像を拡大するのはimg-zoom、黒くて半透明なカバーの表示はhover-coverで設定しています。機能別のクラス名を一覧にしたのがこちらです。

img_zoom背景イメージ共通の設定。マウスホバーした時、背景イメージを拡大する
bg_img66擬似要素に高さを66.6%で設定
item<num>個別のイメージURLを設定
hover-coverマウスホバーした時、半透明なカバー表示する設定

img-zoom要素に画像を拡大する設定をしています。この要素にoverflow-hiddenを設定して、拡大時に画像がはみ出さないようにします。
また、マウスをホバーした時にアニメーションさせたいのでtransitionを設定します。

マウスホバーした時、半透明なカバーを表示する

半透明なカバーはhover-coverの擬似要素に設定します。こちらの要素もアニメーションさせたいのでtransitionを設定します。

マウスがホバーした時に半透明の色を表示するようにします。

以上でマウスホバーすると拡大する動作が実装できました！

まとめ

背景イメージを要素にフィットして表示させたい時、今まで%やvwで調整していましたが、ブラウザの横幅や端末によって細かな調整が必要でした。
今更ながら、実装方法がわかったのでメモ。

最近はobject-fitというプロパティがあるそうです。
背景イメージのような柔軟な表現ができるようです。IEもサポートが終了するので、近々使えるようになりそうです！

スポンサーリンク