CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrap
dedles
dedles

Reputation: 677

rails - render a different picture based on the viewport size

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.

Upvotes: 1

Views: 978

Answers (1)

Brad Werth
Brad Werth

Reputation: 17647

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).

Upvotes: 2

Related Questions