前提・実現したいこと
現在モーダルを用いた写真投稿画面を作っています。
フォームより複数選択でき、即時プレビューを可能にしていますが
即時プレビュー時に追加されればされるほどプレビュー写真が指定の縦横比を崩さず小さくなっていく事を理想としています。
親要素はflexを用いており、object-fit:cover;にてプレビュー画像をトリミングして、プレビュー画像にflex:1 1 autoを用いて親要素内に収まるようにしました。
しかしmax-heightのみ指定しているプレビュー画像が追加すればするほど長細くなってしまいます。
これを回避するためにプレビュー画面生成時にcssをwidthと同様に指定し追加する方法を用いました。
すると何故か二枚目の画像、7枚目が横長になってしまいました。
console.logにて確認したところwidthは習得時にすでに望んだ値(実行後のwidthの値)を取ってきてなく、jquaryの方が早く読み込まれ、その後cssが反映されているのではないかと思いました。
jqueryでもCSSでも良いのでjqueryで追加後に可変的に値を変える事をご教授ください。
該当のソースコード
scss
1#pips{ 2 display: flex; 3 justify-content: center; 4 min-width: 35vh; 5 width: auto; 6 height: 35vh; 7 margin: 0 auto; 8 border: solid 1px #ddd; 9 .imageThumb { 10 // max-height: 35vh; 11 max-width: 35vh; 12 object-fit: cover; 13 border: 2px solid; 14 padding: 1px; 15 flex:1 1 auto; 16 width: 0%; 17 } 18 }
js
1 $( 2 // "<span class=\"pip\">" + 3 "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + 4 "<br/><span class=\"remove\">Remove image</span>" 5 // +"</span>" 6 ).prependTo("#pips"); 7 var image_width = $('.imageThumb').width(); 8 console.log(image_width); 9 $(".imageThumb").css({ 10 "height": image_width + "px" 11 }); 12 $(".remove").click(function(){ 13 $(this).parent(".pip").remove(); 14 });
補足情報(FW/ツールのバージョンなど)
rails 5.2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。