質問編集履歴
1
画面キャプチャを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -293,3 +293,107 @@
|
|
|
293
293
|
|
|
294
294
|
|
|
295
295
|
`main_image.jpg`は 960 x 640、`score.png`は 820 x 200 です。
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
### 補足説明 2018.6.30 7:50
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
やりたいのはこんなイメージです。
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
黄色の四角は`nav`にcssでoutlineをつけてみました。
|
|
308
|
+
|
|
309
|
+
こんな感じで`nav`の高さを背景画像がぴったりフィットするサイズに調整したいです。
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
`nav`の背景画像（score.png）は、
|
|
314
|
+
|
|
315
|
+
|
|
316
|
+
|
|
317
|
+
です。
|
|
318
|
+
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
`style.scss`の変更点は
|
|
322
|
+
|
|
323
|
+
```scss
|
|
324
|
+
|
|
325
|
+
（前略）
|
|
326
|
+
|
|
327
|
+
nav {
|
|
328
|
+
|
|
329
|
+
background-image: url($image_score);
|
|
330
|
+
|
|
331
|
+
background-repeat: no-repeat;
|
|
332
|
+
|
|
333
|
+
background-size: 100%;
|
|
334
|
+
|
|
335
|
+
width: 100%;
|
|
336
|
+
|
|
337
|
+
|
|
338
|
+
|
|
339
|
+
// height: calc(image-height($image_score);
|
|
340
|
+
|
|
341
|
+
// height: image-height($image_score);
|
|
342
|
+
|
|
343
|
+
// height: image-height(#{$image_score});
|
|
344
|
+
|
|
345
|
+
// height: 500px; // comment out 2018.6.30 5:29
|
|
346
|
+
|
|
347
|
+
// どうしたものか？
|
|
348
|
+
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
// 〜〜〜〜2018.6.30 5:22 追記 ここから〜〜〜〜
|
|
354
|
+
|
|
355
|
+
$width: image-width($image_score);
|
|
356
|
+
|
|
357
|
+
$height: image-height($image_score);
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
height: 293px;
|
|
362
|
+
|
|
363
|
+
// height: calc(100% * (#{$height} / #{$width}));
|
|
364
|
+
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
outline: 1px solid yellow;
|
|
368
|
+
|
|
369
|
+
// 〜〜〜〜2018.6.30 5:22 追記 ここまで〜〜〜〜
|
|
370
|
+
|
|
371
|
+
（以下略）
|
|
372
|
+
|
|
373
|
+
```
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
やりたい事がが出来てるように見えるのは、`nav`のheightを予め電卓で計算し、293pxと決め打ちしてるからです。
|
|
378
|
+
|
|
379
|
+
やりたいのは直接px指定ではなく、
|
|
380
|
+
|
|
381
|
+
```scss
|
|
382
|
+
|
|
383
|
+
// height: 293px;
|
|
384
|
+
|
|
385
|
+
height: calc(100% * (#{$height} / #{$width}));
|
|
386
|
+
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
のようにブラウザの横幅を変えたらそれに合わせてheightを計算したいということです。
|
|
390
|
+
|
|
391
|
+
ちなみにこの`scss`だと下のようになります。
|
|
392
|
+
|
|
393
|
+
|
|
394
|
+
|
|
395
|
+
`nav`がつぶれちゃってます。
|
|
396
|
+
|
|
397
|
+
|
|
398
|
+
|
|
399
|
+
補足説明になってますでしょうか？
|