SCSSで％をpx単位にする方法が分かりません..

Question

scssを使ってレスポンシブデザインをしているのですがwidthの値を元にheightを計算する方法が分かりません。

@mixin GoldenRatio($maxsize: 100%, $split: 1) {
  width : calc( #{$maxsize} / #{$split} );
  height: calc( #{$maxsize} / ( #{$split} * 1.618));
  object-fit: cover;
  @content;
}

div.box {
  width: 90%;
   img {
     @include GoldenRatio();
   }
}

現在このようにして100%のwidthを指定してその数値を利用して
黄金比率のheightを指定しようとしているのですがパーセントだと
heightが指定できないためwidthの100%の値をpxに換算してheightに
指定したいです。

vwかemでは指定できるのですがemではデバイスサイズに合わせられなくて
vwでは親要素の幅を無視してしまうので%で考えています。

もしくは100%の値をemに換算してそのemを使用する方法でもいいのかな？とは
思うのですが調べてもpxを％に換算する方法などしか見つけられなくて
困っています。

どなたかお知恵をお貸しいただけないでしょうか？

---

◆追記

ご回答ありがとうございます！ご教授いただいた方法で高さを黄金比率を
保ったまま配置する事ができました。

@mixin GoldenRatio($maxsize: 100%, $split: 1) {
  position: relative;
  width: calc( #{$maxsize} / #{$split} );
  @content;
  &::after {
    display: block;
    padding-top: calc( #{$maxsize} / ( #{$split} * 1.618 ));
    content: "";
  }
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    @content;
  }
}

この様な形で実装できました！ありがとうございましたm(_ _)m

Answer 1

heightが指定できないためwidthの100%の値をpxに換算してheightに指定したいです。

width, height プロパティにパーセント値を使用すると、包含ブロックの幅もしくは高さが参照されます。今回の場合、与えられた SCSS のみでは包含ブロックの横幅や高さを知ることは出来ないため、それは SCSS であっても不可能です。

padding プロパティのパーセント値が包含ブロックの width プロパティを参照する性質を利用すると、質問者さんの実現したいことが可能です (動作確認用リンク)。

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'

• Value: <padding-width> | inherit
• Initial: 0
• Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
• Inherited: no
• Percentages: refer to width of containing block
• Media: visual
• Computed value: the percentage as specified or the absolute length

<div class="box">
  <img src="http://placehold.jp/3d4070/ffffff/150x150.png">
</div>

div.box {
  position: relative;
  width: 90%;

  &::after {
    display: block;
    padding-top: calc(90% / 1.618);
    content: "";
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

質問者さんの実現したいことは CSS Box Sizing Module Level 4 において提案された aspect-ratio プロパティを用いて実現出来ますが、このプロパティはまだ大雑把な草案であるため、これを実装しているブラウザは存在しません。もし上記の方法を用いても実現したいことが行えない場合は、現状 JavaScript を用いる方法を考える必要があります。

§ 4.1. Intrinsic Aspect Ratios: the aspect-ratio property

This property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions. The box’s automatic sizes are then calculated the same as for a replaced element with an intrinsic aspect ratio, see e.g. CSS2 § 10 and CSS Flexible Box Model Level 1 § 9.2. The axis in which the preferred size calculation depends on this aspect ratio is called the ratio-dependent axis, and the resulting size is definite if its input sizes are also definite.

Comments

[hirokuro900]

とても詳しくご回答くださり、感謝しております！
web上で検索しているときに何度か拝見したことがあるコードでafterでpadding-topしたら検証画面で変なpaddingができそう..(ただの勉強不足です。すみません)と思っていたのですがそんな事は全く無くキレイな結果になったのでありがたくご使用させていただきます。

動作確認用に添付していただいたツールも初見でとても興味深く色々と勉強になりました！
貴重なお時間を割いていただき感謝しております。
ありがとうございましたm(_ _)m