1

I'm using rails and bootstrap and I'm using the bootstrap carousel on my landing page. I found that on the mobile view the carousel starts to look quite bad unless I make the pictures much higher than wide.

I wanted to use an if statement in my erb file to check the viewport size and render the appropriate image. I don't think using media queries in css is appropriate in this case as the image size determines the size of the carousel (not simply a background image).

Sorry if this is a newb question.

dedles
  • 606
  • 2
  • 8
  • 20

1 Answers1

2

Erb is rendered server-side, which really has no notion of the viewport size, you would need to resort to using javascript in conjunction with your code, to make the adjustment.

This seems like a perfect case for media queries in the css. This is a much cleaner solution than muddling around with js.

You can, in the carousel, draw both of the images. Give all the wide images a distinct class (wide-image, for example) and all of the tall images a distinct class (tall-image, for example). Then, in the appropriate section in your css, simply set the undesirable image class to display none, which will effectively leave you with only the appropriate images displaying (and governing the size of the carousel).

Brad Werth
  • 17,411
  • 10
  • 63
  • 88
  • 1
    Correct me if I'm wrong - but this doesn't prevent the client browser from loading both images? So from a speed perspective it doesn't help. – CHawk Apr 21 '17 at 12:24
  • @CHawk. not if you set the image as a background-image https://stackoverflow.com/a/15346450/2291357 – Jerome Sep 16 '19 at 09:25