LoginSignup
2
0

More than 5 years have passed since last update.

rails5, bootstrap4でスマホ、PCでヘッダー画像を出し分ける

Last updated at Posted at 2018-06-14

headerの画像を2枚用意して、出し分ける。

スマホとPCそれぞれに違うクラスを割り当てる。

スマホ[class: "d-block d-md-none mx-auto"]
PC[class: "d-none d-md-block img-fluid"

index.html.haml
//スマホ
= image_tag("/images/header.png", width: '375', alt: "なろう廃人のすすめ", class: "d-block d-md-none mx-auto")
//PC
= image_tag("/images/header-pc.png", alt: "なろう廃人のすすめ", class: "d-none d-md-block img-fluid pb-2")

参考サイト
Bootstrap4 PCとスマホで画像を切り替える方法

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0