windowのリサイズに合わせて背景画像のwidthとheightを変化させたい。

Question

先日友人からリサイズの仕方については教わったのですが、
サイズの指定方法の部分でつまずいてるので、どなたか
相談に乗って下されば幸いに思います。

コード   <ul class="skill-list">
    <li class="skill-list__item first-skill"></li>
    <li class="skill-list__item second-skill"></li>
    <li class="skill-list__item third-skill"></li>
    <li class="skill-list__item forth-skill"></li>
    <li class="skill-list__item fifth-skill"></li>
    <li class="skill-list__item six-skill"></li>
    <li class="skill-list__item seven-skill"></li>
  </ul>

コード .skill-list__item {
    width: 88px;
    height: 66px;
    background-size: contain;
    list-style-type: none;
    margin: 15px auto;//下から移動
}

.skill-list {
    display: flex;
    flex-wrap: wrap;
    // width: 300px;
}

.first-skill {
    background-image: url(../images/illustrator.png);
}

.second-skill {
    background-image: url(../images/ps2.png);
}

.third-skill {
    background-image: url(../images/xd.png);
}

.forth-skill {
    background-image: url(../images/html&css.png);
}

.fifth-skill {
    background-image: url(../images/js.png);
}

.six-skill {
    background-image: url(../images/vscode.png);
}

.seven-skill {
    background-image: url(../images/);
}

コード $(window).resize(function(){
  var width = window.innerWidth;
  // スキル情報

  var $skillBox = $('.skill-list__item');
  var $SPskillBoxWidth = width * .75 / 3.5;
  var $SPskillBoxHeight = $SPskillBoxWidth
  function responsiveFuncSP (){
    $skillBox.css({
      'width': $SPskillBoxWidth,
      'height': $SPskillBoxHeight,
    });
  }
  responsiveFuncSP();
});

リンク内容

Comments

[y_waiwai]

具体的な質問を書きましょう

Answer 1

  $(window).resize(responsiveFuncSP);
  responsiveFuncSP();

  function responsiveFuncSP() {
      var windowWidth = window.innerWidth;

      $('.skill-list__item').each(function() {
          var width = windowWidth * .75 / 3.5;
          var height = parseFloat($(this).css('height')) / parseFloat($(this).css('width')) * width;
          $(this).css({
              'width': width,
              'height': height
          });
      });
  }

Comments

[dream]

ご回答ありがとうございます！ちなみにparseFloatとはどのようなものなんですか？

[naomi3]

css()でwidthなどを取得すると「px」つきの文字列なので、parseFloat関数を用いて数値化しています。

[dream]

以前は質問に付き合っていただきありがとうございました。
今更なんですが追加で質問がありまして、parseFloatに続く部分で
height/widthとあるのですが、こちらは上下の順序が逆でも正常に
動作しますか？

[naomi3]

var width =　… と　var height = … の順番が逆でOKかということでしょうか？

[dream]

私の説明不足ですみません。var heightに格納されてる部分で、css('height')割るcss('width')
のような関係になってる箇所があるのですが、これは逆にwidth割るheightでも成立しますか？

[naomi3]

縦横比が正しく計算されないので、縦に伸びるか横に伸びた画像になります。

[dream]

お忙しい中ありがとうございます。おかげさまで理解できました。

[dream]

質問をもう一点だけさせて下さい。
var heightの末尾に*widthとございますが、こちらがないと
変数heightが扱えないのでしょうか？

[naomi3]

*widthがないとheightがすごく短くなりますね。

[dream]

おっしゃる通り、短くなるどころかそのもの自体が見えなくなって
しまいました。
最後までお付き合いいただき誠にありがとうございました。

Answer 2

自分でもどう質問していいかわからないので、今回は自分でなんとかします。