親ごとリサイズしたい

Question

CSS、jQueryともに初心者ですが
どうぞ宜しくお願い致します。

前提・実現したいこと

「メルカリ」出品ページのような画像のアップロード＋プレビュー機能を作ってるところです。
つい先ほどもこちらで解決出来ました。有難う御座います。
jsからのサイズ変更が効きません

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

こちらで回答いただいたおかげでリサイズはできたのですが、カメラアイコンが（全体を囲ってるwidthから溢れて）改行されてしまいました。

ブラウザの検証を見ると分かりました。
原因はカメラの親であるdiv(camera__inner)のサイズが広いままだからでした。

プレビュー時に、カメラアイコンは横幅を狭くさせるため、画像枚数分の横幅を狭くするよう指定しました。
具体的には以下の流れで行いました。
・カメラアイコン自体にはwidth:100%にしておき
・その親(div)にサイズ指定（width:500px）
・リサイズは、カメラアイコンに対して行う
これでカメラアイコン自体は、リサイズされますが、親がまだ500pxのままなのが問題のようです。

どのように修正すべきでしょうか？
先輩方アドバイスいただけないでしょうか？

該当のソースコード

codepenはこちらになります。
codepen

<div style="width: 500px;">
    <ul class="horizontal-img-list" >
        <li>
            <div class="camera__inner" >
                <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>
          </div>
        </li>
    </ul>
</div>

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

.camera__inner {
    width: 500px;
}

.camera-width {
   width: 100%;
}

.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 + ' )) '
      })
      

    
    
    
    
  })  
});

試したこと

同じタイミングで親にもリサイズかけると、アイコンが潰れてしまいました(泣)

Answer 1

camera-widthクラスをlabel要素から削除して、li要素の方に付加してください。

<div style="width: 500px;">
    <ul class="horizontal-img-list" >
        <li class="camera-width">
            <div class="camera__inner" >
                <label class="upload-img" >

cssの下記は削除。

/*
.camera__inner {
    width: 500px;
} */

Comments

[pecchan]

有難う御座います。
イメージ通りです（＞＜）

Answer 2

htmlの方で、

<li>に新しいクラス名をつけてあげて(わたしの場合はtestを付けました。)

        <li class="test">
            <div class="camera__inner" >
                <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>
          </div>
        </li>

javascriptの方で

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

↓

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

変えたらイメージしたとおりになりますか？

Comments

[pecchan]

有難う御座います。
すみません、アイコンの幅は変わりませんでした。