CSS,jQueryともに初心者です。
的はずれな質問してたら申し訳ございません。
前提・実現したいこと
画像のアップロードとプレビューを作ってるところです。
「メルカリ」の出品ページのイメージです。
発生している問題・エラーメッセージ
画像のアップロード時に、カメラアイコン部分をリサイズしたいのですが、その指定が効きません。
カメラアイコンが下に移動した理由は、全体をflexにしており、
追加された画像の横幅分だけアイコン横幅からマイナスしてるのですが、それが効かずこのようになったと思います。
該当のソースコード
html
1<div style="width: 500px;"> 2 <ul class="horizontal-img-list" > 3 <li> 4 <label class="upload-img camera-width" > 5 <div class="upload-img__inner"> 6 <input class="upload-img__inner__input" accept="image/png,image/jpeg" multiple="multiple" type="file" style="display: none;"> 7 <svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" > 8 <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> 9 </svg> 10 <p class="fs12">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p> 11 </div> 12 </label> 13 </li> 14 </ul> 15</div> 16 17<script type="text/javascript" src="/js/item/add_image.js"></script> 18
css
1.camera-width { 2 width: 500px; 3} 4 5.upload-img { 6 cursor: pointer; 7 display: block; 8} 9 10.upload-img__inner { 11 place-content: center; 12 -webkit-box-align: center; 13 -webkit-box-pack: center; 14 background-color: rgb(245, 245, 245); 15 border: 1px dashed rgb(204, 204, 204); 16 //width: 100%; 17 height: 150px; 18 display: flex; 19 align-items: center; 20 flex-wrap: wrap; 21 flex-direction: column; 22 text-align: center; 23} 24 25
javascript
1$(document).on('click', '.upload-img', function() { 2 $('.upload-img').off('click'); 3 4 $('.upload-img__inner__input').off('change'); 5 $('.upload-img__inner__input').on('change', function (e) { 6 7 // ファイル未選択なら処理を抜ける 8 c = $('.upload-img__inner__input').val().length; 9 if(c==0){ 10 return; 11 } 12 13 // 画像プレビュー 14 let reader = new FileReader(); 15 reader.readAsDataURL(e.target.files[0]); 16 let list_item = $(`<li class="horizontal-img-list__item"> 17 <div class="image-trim"> 18 <img> 19 </div> 20 <div>削除</div> 21 </li>`); 22 reader.onload = function(e){ 23 $(list_item).find('img').attr('src', e.target.result); 24 } 25 $('.horizontal-img-list li:last-child').before(list_item); 26 27 $('.horizontal-img-list').find('p').remove(); 28 29 30 // inputボタンリサイズ 31 let $imgs = $('.horizontal-img-list').find('.image-trim'); 32 33 $('.camera-width').css({ 34 'width': 'calc(100% - (20% * ${$imgs.length}))' 35 }) 36 37 38 39 40 }) 41});
直接<input>にサイズ指定しない理由
label(upload-imgクラス)配下はコンポーネントとして再利用する目的があり、
<input>タグや、upload-img__innerクラスに具体的なサイズ指定を置きたくありません。
なので、上位にサイズ指定用のcamera-widthクラスを追加しました。
codepn
コードペンを用意してみました。
codepen
どうすればjs側からサイズ変更できるでしょうか?
先輩方教えて下さい。宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/19 05:21