navの背景画像がすっぽり表示されるよう高さ指定したい

前提・実現したいこと

sass(scss)初心者でcompassはさっき初めて知ってインストールしたばかりです。

headerの中にnavを入れて背景画像を指定しています。
navの高さをpxで指定しないとnavが高さ0になります。
（Chromeのデベロッパーツール (command + option + i) で確認しました。）

そこでcssで高さを指定してやりたいのですが、navは横幅を100%にしたいです。その中で背景画像も横幅を100%にしたいです。且つ、背景画像は縦横比を保持しつつ全体を表示したいです。横幅を100%にして縦をpx指定だとブラウザの横幅によって背景画像が欠けたり余ったりします。（当然ですね。）

compassを知ったばかりなのですが、それとcss3のcalcとか変数とかを使うとnavの横幅がpxで取得出来たりして背景画像がnavにすっぽりはまるように高さをpx指定出来そうに思えるのですが、やり方が分からず苦戦しております。

どうすれば実現できるかご教授いただけますでしょうか。
（根本的なアプローチの間違いへの指摘等も大歓迎です。）

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3<head>
4    <meta charset="utf-8">
5    <title>background のテスト</title>
6    <link rel="stylesheet" href="css/style.css">
7</head>
8<body>
9    <header>
10        <img src="./images/logo.png">
11        <div style="height: 100px"></div>
12        <nav>
13            <ul>
14                <li id="home"><a href="#">Home</a></li>
15                <li id="shop"><a href="#">Shop</a></li>
16                <li id="blog"><a href="#">Blog</a></li>
17                <li id="about"><a href="#">About</a></li>
18                <li id="contact"><a href="#">Contact</a></li>
19            </ul>
20        </nav>
21    </header>
22    <div id="main">
23        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
24    </div>
25    <footer>
26        &copy; 2018 hoge.
27    </footer>
28</body>
29</html>

scss
1$image_score: "../images/score.png";
2
3* {
4    padding: 0;
5    margin: 0;
6}
7
8body {
9    margin: 0 20px 0;
10    background-image: url(../images/main_image.jpg);
11    background-repeat: no-repeat;
12    background-size: 100% auto;
13}
14
15header {
16    margin: 20px 0 20px;
17    color: white;
18
19    nav {
20        background-image: url($image_score);
21        background-repeat: no-repeat;
22        background-size: 100%;
23        width: 100%;
24
25        // height: calc(image-height($image_score);
26        // height: image-height($image_score);
27        // height: image-height(#{$image_score});
28        height: 500px;
29        // どうしたものか？
30
31        ul {
32            position: relative;
33            list-style: none;
34            height: 100%;
35
36            li {
37                display: block;
38                text-align: center;
39                margin: 5px;
40                padding: 3px;
41                width: 100px;
42                // background-color: rgba(255, 255, 255, 0.3);
43                float: left;
44                position: absolute;
45                &#home {
46                    left: 15%;
47                    top: 60%;
48                }
49                &#shop {
50                    left: 30%;
51                    top: 50%;
52                }
53                &#blog {
54                    left: 45%;
55                    top: 70%;
56                }
57                &#about {
58                    left: 60%;
59                    top: 60%;
60                }
61                &#contact {
62                    left: 75%;
63                    top: 35%;
64                }
65
66                a {
67                    font-size: 16pt;
68                    &:link {color: peru; }
69                    &:visited {color: peru; }
70                    &:active {color: peru; }
71                    &:hover {color: khaki; }
72                }
73            }
74        }
75        &:after {
76            content: "";
77            display: block;
78            clear: both;
79        }
80    }
81}
82div#main {
83    margin: 10px 300px 10px 300px;
84    padding: 10px;
85    background-color: lightgray;
86}
87footer {
88    background-color: brown;
89    text-align: center;
90}

試したこと

「sass background-image sizeを取得」、「sass compass 要素の幅」などでググりましたが欲しい情報にたどり着けませんでした。

補足情報（FW/ツールのバージョンなど）

main_image.jpgは 960 x 640、score.pngは 820 x 200 です。

補足説明 2018.6.30 7:50

やりたいのはこんなイメージです。

黄色の四角はnavにcssでoutlineをつけてみました。
こんな感じでnavの高さを背景画像がぴったりフィットするサイズに調整したいです。

navの背景画像（score.png）は、

です。

style.scssの変更点は

scss
1（前略）
2    nav {
3        background-image: url($image_score);
4        background-repeat: no-repeat;
5        background-size: 100%;
6        width: 100%;
7
8        // height: calc(image-height($image_score);
9        // height: image-height($image_score);
10        // height: image-height(#{$image_score});
11        // height: 500px;   // comment out 2018.6.30 5:29
12        // どうしたものか？
13
14
15        // 〜〜〜〜2018.6.30 5:22 追記 ここから〜〜〜〜
16        $width: image-width($image_score);
17        $height: image-height($image_score);
18
19        height: 293px;
20        // height: calc(100% * (#{$height} / #{$width}));
21
22        outline: 1px solid yellow;
23        // 〜〜〜〜2018.6.30 5:22 追記 ここまで〜〜〜〜
24（以下略）

やりたい事がが出来てるように見えるのは、navのheightを予め電卓で計算し、293pxと決め打ちしてるからです。
やりたいのは直接px指定ではなく、

scss
1// height: 293px;
2height: calc(100% * (#{$height} / #{$width}));

のようにブラウザの横幅を変えたらそれに合わせてheightを計算したいということです。
ちなみにこのscssだと下のようになります。

navがつぶれちゃってます。

補足説明になってますでしょうか？

kei344

2018/06/29 18:06

どういうレイアウトにしたくて、現状どうなっているのかをスクリーンショットなどを使って説明されてはいかがでしょうか。

taro_nii_chan

2018/06/29 22:54

質問に追記させていただきました。よろしくお願いします。

yoshinavi

2018/06/30 01:04

「sass compass」では無く、「CSS　レスポンシブ」等で検索されてはどうでしょうか？

taro_nii_chan

2018/06/30 01:28

yoshinaviさま、ありがとうございます。「css レスポンシブ」で検索はしてみました。ただ、おっしゃってる意図が分かりません。<meta name="viewport" content="width=device-width,initial-scale=1"> を入れれば解決するのか、header や nav に line-height: 1; を入れればいいのか、nav に height: auto; を入れればいいのか（どれも試してみて駄目でした）、試行錯誤が増えてしまっています。どんな方針のもとに「css レスポンシブ」で検索すればいいのか教えていただけますでしょうか？

yoshinavi

2018/06/30 01:40

まずは、「header部分をレスポンシブにしたいのが第一の希望かな？」と思ったので、要素（背景imgやbox等）をレスポンシブの基本となるHTMLとCSSが分からないと･･･、と思って、検索方法の一例を書きました。これが解決済でしたら余分なコメントでスミマセンでした。

yoshinavi

2018/06/30 01:48

考え方としては「nav」で対応ではなく、それを包括する「header」をレスポンシブさせます。

taro_nii_chan

2018/06/30 01:55

簡単にここをこうすれば、という問題ではなさそうですね。考え方からちゃんと学ばなければ。ありがとうございます。

行動規範の内容に同意します

回答2件

ベストアンサー

的外れかもしれませんが、background-sizeプロパティ, background-positionプロパティを使えば良いのでは？
「背景画像は縦横比を保持しつつ」とのことなので、background-sizeプロパティに設定する値はcontainですね。

SCSS
1$image_score: "../images/score.png";
2
3
4* {
5    padding: 0;
6    margin: 0;
7}
8
9body {
10    margin: 0 20px 0;
11    background-image: url(../images/main_image.jpg);
12    background-repeat: no-repeat;
13    background-size: 100% auto;
14}
15
16header {
17    margin: 20px 0 20px;
18    color: white;
19
20    nav {
21        background: center / contain no-repeat url($image_score) ; // backgroundプロパティに変更
22        width: 100%;
23        height: 20vw; // 変更
24        outline: 1px solid yellow;
25        ul {
26            position: relative;
27            list-style: none;
28            height: 100%;
29
30            li {
31                display: block;
32                text-align: center;
33                margin: 5px;
34                padding: 3px;
35                width: 100px;
36                float: left;
37                position: absolute;
38                &#home {
39                    left: 15%;
40                    top: 60%;
41                }
42                &#shop {
43                    left: 30%;
44                    top: 50%;
45                }
46                &#blog {
47                    left: 45%;
48                    top: 70%;
49                }
50                &#about {
51                    left: 60%;
52                    top: 60%;
53                }
54                &#contact {
55                    left: 75%;
56                    top: 35%;
57                }
58
59                a {
60                    font-size: 16pt;
61                    &:link {color: peru; }
62                    &:visited {color: peru; }
63                    &:active {color: peru; }
64                    &:hover {color: khaki; }
65                }
66            }
67        }
68        &:after {
69            content: "";
70            display: block;
71            clear: both;
72        }
73    }
74}
75div#main {
76    margin: 10px 300px 10px 300px;
77    padding: 10px;
78    background-color: lightgray;
79}
80footer {
81    background-color: brown;
82    text-align: center;
83}

投稿2018/06/30 08:16

s8_chu

総合スコア14731

taro_nii_chan

2018/06/30 08:58

ほぼ出来ました。ありがとうございます。vwという単位を知りませんでした。勉強になりました。ところで何故 height が 20vw なのか分からず考えてみたのですが、score.png が 820 x 200 である事を考えると、100% * 200 / 820 で 24.39vw もしくは height: calc(100vw * 200 / 820); としてしまっていい気がするのですが、それであってますでしょうか？