質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

492閲覧

jQueryを用いたCSS変更について

sakusakusaku10

総合スコア21

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/07/19 11:39

前提・実現したいこと

現在モーダルを用いた写真投稿画面を作っています。
フォームより複数選択でき、即時プレビューを可能にしていますが
即時プレビュー時に追加されればされるほどプレビュー写真が指定の縦横比を崩さず小さくなっていく事を理想としています。
親要素は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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

理由はいまいちわかりませんが

scss

1#pips{ 2 text-align: center; 3 width: 100%; 4 display: flex; 5 .imageThumb { 6 width: 0%; 7 flex: 1 1 auto; 8 margin: 5px; 9 object-fit: cover; 10 border: 1px solid #dfdfdf; 11 border-radius: 10px; 12 max-width: 35vh; 13 } 14 }

これで比較的理想にたどり着けました。

投稿2019/07/19 16:07

sakusakusaku10

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問