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

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

ただいまの
回答率

89.86%

image_tagとbackground-image:urlを組み合わせて使いたいです。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,293

s.k

score 268

前提・実現したいこと

railsにおいて、背景画像をimage_tagとbackground-imageを組み合わせて表示したいです。

以下の条件を満たすためです。

【条件】
①表示する画像の縦横比は元の比と同じにすること。
②幅⁼高さ,幅≠高さ(縦長,横長)に関わらず一定の枠内に収め、余白を残さないように表示すること。

書き出し

以下のコードだと画像が表示されません…

<div style="background-image:url('<%= image_tag(@user.image.url) %>')"></div>

上記①,②の条件を満たすためにはbackground-image:urlを使うことがベストプラクティスであるとご指摘いただきました。

実行手順

①,link_toブロックを作成。
②,①のブロック内に<div></div>を挿入。
③,<div>内に<%= image_tag(@user.image.url) %>を引数にとるbackground-image:urlを挿入。

①,link_toブロックを作成。

     <%= link_to current_user do %>
     <% end %>

②,①のブロック内に<div></div>を挿入。

     <%= link_to current_user do %>
           <div></div>
     <% end %>

③,<div>内に<%= image_tag(@user.image.url) %>を引数にとるbackground-image:urlを挿入。

     <%= link_to current_user do %>
       <div style="background-image:url('<%= image_tag(@user.image.url) %>')"></div>
     <% end %>

結果の予想

形式的には背景画像ですが、link_toブロックで囲んでいますので、実質的には、リンク画像が表示される予想です。

実際の結果

div枠内に以下のようなリンクが出てくるだけでした。

')">

ステップ明記

③の引数の記述方法に誤りがあると思っています。
引数を'<%= image_tag(@user.image.url) %>'から/images/icons/hoge.png**/uploads/user/image/1/thumb_unnamed.jpg**に変換しても表示されませんでした。

image_tagとの組み合わせではなくそれ以前の問題の可能性があります…

文献の引用

Rails4ではbackground:url("assets/hoge.png")の書き方は動かない話

私の場合は多少ケースが異なるかと思いましたが試してみました。

環境 ――

gem 'rails', '4.2.5'
gem 'carrierwave',             '0.10.0'
gem 'mini_magick',             '3.8.0'

ご助言お願いします。

コードまとめ

<div class="user-show-icon-cover">
 <div class="user-show-icon-information">
     <a href="" style="background-image:url(/uploads/user/image/1/thumb_unnamed.jpg)"></a>
     <%= link_to current_user do %>
     <%= image_tag(@user.image.url, :alt => "アイコン", :class => "user_show_image") %>
     <% end %>
 </div>
</div>
.user-show-icon-cover {
  position: relative;
  height: 200px;
  width: 200px;
  border: 5px solid #000;
  border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;
}
.user-show-icon-information 
{
  width: 100%;
  height: 100%;
}
.user-show-icon-information a 
{
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • gin

    2016/12/02 11:27

    想像ですけどimage_tagってimg要素を生成するやつですよね?なので③はこうなって「<div style="background-image:url('<img src="aaaaa">')"></div>」aaaaaの後ろの「">」でdivが閉じられて「')">」がテキストとして出てるっぽいですね。

    キャンセル

  • s.k

    2016/12/02 12:25

    ginさん ありがとうございます!生成するやつです!なるほど…

    キャンセル

回答 1

checkベストアンサー

+2

上記①,②の条件を満たすためにはbackground-image:urlを使うことがベストプラクティスであるとご指摘いただきました。 

そうかなぁ。

下記質問に回答したコードでも出来ると思います。

【HTML - swiper スライダーの要素の高さ(58584)|teratail】
https://teratail.com/questions/58584

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/21 10:14

    うおおおおおお!
    object-fit: cover; あたりですかね?
    やってみます!

    キャンセル

  • 2016/12/21 10:22

    object-fitでまずできました!

    キャンセル

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

  • ただいまの回答率 89.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる