Rails 画像を規定のサイズにリサイズしつつ、正方形に外接させて切り取りたい。

Question

###前提・実現したいこと
Ruby on Rails で画像を規定のサイズにリサイズしつつ、
正方形に外接させて切り取りたいと考えています。

###発生している問題・エラーメッセージ

background-size: cover;

で上記の動作をさせることができるようなのですが、
Railsで背景画像に設定させる方法がわかりません。

###ソースコード
普通の画像は

image_tag(user.image1.url)

で設定できますが、どのようにすれば背景画像に設定できるのでしょうか。

静的なURLであれば、CSSに直接

background-image: url(/assets/hoge.png);

のように記述できるのですが、動的なURLを背景に設定するにはどうすれば良いのでしょうか。

Answer 1

直接.erbに埋め込んであげれば良いのでは?

.sqere_background {
  background-size: cover;
}

<div class="sqere_background" style="background-image: url(<%= background_image_path %>);"></div>

Comments

[退会済みユーザー]

ありがとうございます！
ちなみに背景にしてしまうとその画像に対して
link_to image_tag～
のようにリンクを貼ったりすることはできないのでしょうか・・・。

[rifuch]

画像を規定のサイズにリサイズして(切り抜いて)表示する、という要件に対して、CSSのbackgound-imageで対応しているのがそもそもの間違いという気もしますが･･･
単純に、上記のような<div>タグに対して、リンクを張るなら、かなり生っぽくなりますが、以下の様なやり方で行けると思います。

<a href="<%= hoge_path %>">
<div class="sqere_background" style="background-image: url(<%= background_image_path %>);"></div>
</a>

[退会済みユーザー]

ありがとうございます！うまくいきました！
link_to image_tag 画像に透過だけの画像を用意したらうまくいきました！！
ありがとうございます！
＞画像を規定のサイズにリサイズして(切り抜いて)表示する、という要件に対して、CSSのbackgound-imageで対応しているのがそもそもの間違いという気もしますが･･･
⇒背景にする以外（「background-size: cover;」以外）の対処方法が見つかりませんでして・・・

[rifuch]

正直に一から実装しようとすると、かなり大変な目に遭いますが、CarrierWave等のプラグインを利用すると、案外簡単にできますよ。