子要素の画像を親要素の背景画像に設定したい

Question

子要素の画像を親要素の背景画像に設定したいです。

<div class="f_left"><img src="hoge.jpg" alt=""></div>

こちらの「f_left」のインラインstyle属性で子要素の画像を背景画像として指定したいです。
子要素の画像は動的に切り替わります。

<div class="f_left" style="background:#fff url(hoge.jpg) 50% 50% no-repeat; background-size:contain;"><img src="hoge.jpg" alt=""></div>

ご教授のほどよろしくお願いいたします。

Comments

[rossi46hiro]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

Answer 1

変数「img」が展開されるように下記のようにしてみてはいかがでしょうか？

$(function() {
var img =$(".f_left img").attr("src");
$(".f_left").attr({"style":"background:#fff url('" + img + "') 50% 50% no-repeat; background-size:contain;"});
});

JavaScriptの変数の扱いに関しては下記サイトに解りやすく解説されておりました。
ご参考下さいませ。
http://crocro.com/write/manga_javascript/wiki.cgi?p=%CA%B8%BB%FA%CE%F3%CA%D1%BF%F4%A4%C8%CD%CD%A1%B9%A4%CA%BD%D0%CE%CF#p8

Comments

[castail]

ご回答ありがとうございます。

ご教授いただいた内容でうまく動作いたしました。
感謝いたします。

ありがとうございました。

Answer 2

jQueryの「attr」「css」メソッドで簡単にできますよ。
<div class="f_left"><img></div>が複数あり、個別に処理するなら「each」も使いますね。
やってみて分からないところがあれば、また質問してみてください。

Comments

[castail]

ご回答ありがとうございます。

現時点でこちらで試してうまくいっていない記述は以下の通りです。

$(function() {
var img =$(".f_left img").attr("src");
$(".f_left").attr({"style":"background:#fff url('img') 50% 50% no-repeat; background-size:contain;"});
});

こちらの記述に関してアドバイス願えますでしょうか？

[rossi46hiro]

動作するコードはnarakenerさんの回答で問題ないとのことで、1点、気になる点を補足させて下さい。
このコードでうまく動作すると言うことはimgは複数ないのだと思いますが、それならば親のdivはidを使うべきかと。
jQueryのclass検索はすごく効率が悪いので、他の要素が増えるほど動作が遅くなっていきます。