jsからのサイズ変更が効きません

Question

CSS,jQueryともに初心者です。
的はずれな質問してたら申し訳ございません。

前提・実現したいこと

画像のアップロードとプレビューを作ってるところです。
「メルカリ」の出品ページのイメージです。

発生している問題・エラーメッセージ

画像のアップロード時に、カメラアイコン部分をリサイズしたいのですが、その指定が効きません。

アップロード前

↓
アップロード後

カメラアイコンが下に移動した理由は、全体をflexにしており、
追加された画像の横幅分だけアイコン横幅からマイナスしてるのですが、それが効かずこのようになったと思います。

該当のソースコード

<div style="width: 500px;">
    <ul class="horizontal-img-list" >
        <li>
            <label class="upload-img camera-width" >
              <div class="upload-img__inner">       
            		  <input class="upload-img__inner__input" accept="image/png,image/jpeg" multiple="multiple" type="file" style="display: none;">
            		  <svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" >
            			  <path d="M19.3,5H16.73l-.8-1.61A.7.7,0,0,0,15.3,3H8.7a.7.7,0,0,0-.63.39L7.27,5H4.7A2.7,2.7,0,0,0,2,7.7V18.3A2.7,2.7,0,0,0,4.7,21H19.3A2.7,2.7,0,0,0,22,18.3V7.7A2.7,2.7,0,0,0,19.3,5ZM12,17.3A4.3,4.3,0,1,1,16.3,13,4.31,4.31,0,0,1,12,17.3Z"></path>
            		  </svg>
            		  <p class="fs12">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p>
          	</div>
          </label>
        </li>
    </ul>
</div>

<script type="text/javascript" src="/js/item/add_image.js"></script>

.camera-width {
    width: 500px;
}

.upload-img {
    cursor: pointer;
    display: block;
}

.upload-img__inner {
    place-content: center;
    -webkit-box-align: center;
    -webkit-box-pack: center; 
    background-color: rgb(245, 245, 245);
    border: 1px dashed rgb(204, 204, 204);
    //width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
}

$(document).on('click', '.upload-img', function() {
  $('.upload-img').off('click');
  
  $('.upload-img__inner__input').off('change');
  $('.upload-img__inner__input').on('change', function (e) {
    
    // ファイル未選択なら処理を抜ける
    c = $('.upload-img__inner__input').val().length;
    if(c==0){
      return;
    }
    
    // 画像プレビュー
    let reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    let list_item = $(`<li class="horizontal-img-list__item">
                                  <div class="image-trim">
                                    <img>
                                  </div>
                                  <div>削除</div>
                              </li>`);
    reader.onload = function(e){
      $(list_item).find('img').attr('src', e.target.result);
    }
    $('.horizontal-img-list li:last-child').before(list_item);
    
    $('.horizontal-img-list').find('p').remove();

    
    // inputボタンリサイズ
    let $imgs = $('.horizontal-img-list').find('.image-trim');
  
      $('.camera-width').css({
          'width': 'calc(100% - (20% * ${$imgs.length}))'
    })
    
    
    
    
  })  
});

直接<input>にサイズ指定しない理由

label（upload-imgクラス）配下はコンポーネントとして再利用する目的があり、
<input>タグや、upload-img__innerクラスに具体的なサイズ指定を置きたくありません。
なので、上位にサイズ指定用のcamera-widthクラスを追加しました。

codepn

コードペンを用意してみました。
codepen

どうすればjs側からサイズ変更できるでしょうか？
先輩方教えて下さい。宜しくお願い致します。

Answer 1

      $('.camera-width').css({
          'width': 'calc(100% - (20% * ${$imgs.length}))'
    })

一番目の問題はここでバッククオートではなくシングルクオートを使っているので${}が展開されず無視されていることでしょう。

ここを直しても、.camera-width の親ボックスのwidthが指定されていないので、パーセント値のwidthはけっきょく無視されます。

Comments

[pecchan]

２つ問題があったのですね！親にwidth指定したらできました！
自分ひとりでは解決出来ませんでした。

有難う御座います！！

Answer 2

    $('.camera-width').css({
          'width': 'calc(100% - (20% * ${$imgs.length}))'
    })

↓

      $('.camera-width').css({
          'width' :  'calc(100% - (20% * ' + $imgs.length + ' )) '
    })

こう直したらどうでしょうか？

Comments

[pecchan]

有難う御座います！そのようにさせていただきました！
moromon様にもベストアンサー送りたいです。申し訳ございません。
※早かったもう１人の方に送らさせていただきました。どうかご了承下さい。