質問編集履歴
1
画面キャプチャを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -145,4 +145,56 @@
|
|
|
145
145
|
|
|
146
146
|
### 補足情報（FW/ツールのバージョンなど）
|
|
147
147
|
|
|
148
|
-
`main_image.jpg`は 960 x 640、`score.png`は 820 x 200 です。
|
|
148
|
+
`main_image.jpg`は 960 x 640、`score.png`は 820 x 200 です。
|
|
149
|
+
|
|
150
|
+
### 補足説明 2018.6.30 7:50
|
|
151
|
+
|
|
152
|
+
やりたいのはこんなイメージです。
|
|
153
|
+
|
|
154
|
+
黄色の四角は`nav`にcssでoutlineをつけてみました。
|
|
155
|
+
こんな感じで`nav`の高さを背景画像がぴったりフィットするサイズに調整したいです。
|
|
156
|
+
|
|
157
|
+
`nav`の背景画像（score.png）は、
|
|
158
|
+
|
|
159
|
+
です。
|
|
160
|
+
|
|
161
|
+
`style.scss`の変更点は
|
|
162
|
+
```scss
|
|
163
|
+
（前略）
|
|
164
|
+
nav {
|
|
165
|
+
background-image: url($image_score);
|
|
166
|
+
background-repeat: no-repeat;
|
|
167
|
+
background-size: 100%;
|
|
168
|
+
width: 100%;
|
|
169
|
+
|
|
170
|
+
// height: calc(image-height($image_score);
|
|
171
|
+
// height: image-height($image_score);
|
|
172
|
+
// height: image-height(#{$image_score});
|
|
173
|
+
// height: 500px; // comment out 2018.6.30 5:29
|
|
174
|
+
// どうしたものか？
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
// 〜〜〜〜2018.6.30 5:22 追記 ここから〜〜〜〜
|
|
178
|
+
$width: image-width($image_score);
|
|
179
|
+
$height: image-height($image_score);
|
|
180
|
+
|
|
181
|
+
height: 293px;
|
|
182
|
+
// height: calc(100% * (#{$height} / #{$width}));
|
|
183
|
+
|
|
184
|
+
outline: 1px solid yellow;
|
|
185
|
+
// 〜〜〜〜2018.6.30 5:22 追記 ここまで〜〜〜〜
|
|
186
|
+
（以下略）
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
やりたい事がが出来てるように見えるのは、`nav`のheightを予め電卓で計算し、293pxと決め打ちしてるからです。
|
|
190
|
+
やりたいのは直接px指定ではなく、
|
|
191
|
+
```scss
|
|
192
|
+
// height: 293px;
|
|
193
|
+
height: calc(100% * (#{$height} / #{$width}));
|
|
194
|
+
```
|
|
195
|
+
のようにブラウザの横幅を変えたらそれに合わせてheightを計算したいということです。
|
|
196
|
+
ちなみにこの`scss`だと下のようになります。
|
|
197
|
+
|
|
198
|
+
`nav`がつぶれちゃってます。
|
|
199
|
+
|
|
200
|
+
補足説明になってますでしょうか？
|