рельсы - визуализируйте другое изображение, основанное на размере видового экрана

Question

Я использую рельсы и бутстрап, и я использую карусель для начальной загрузки на своей целевой странице. Я обнаружил, что по мобильному виду карусель начинает выглядеть довольно плохо, если я не сделаю снимки намного выше, чем широкие.

Я хотел использовать оператор if в своем файле erb, чтобы проверить размер видового экрана и отобразить соответствующее изображение. Я не думаю, что использование медиа-запросов в css является подходящим в этом случае, так как размер изображения определяет размер карусели (а не просто фоновое изображение).

Извините, если это новый вопрос.

Answer 1

Erb визуализируется на стороне сервера, который действительно не имеет представления о размере видового экрана, вам нужно прибегнуть к использованию javascript в сочетании с вашим кодом, чтобы выполнить настройку.

Это похоже на идеальный случай для медиа-запросов в css. Это гораздо более чистое решение, чем путаница с js.

Вы можете, в карусели, нарисовать оба изображения. Дайте всем широким изображениям отдельный класс (например, широкоформатное изображение) и все высокие изображения отдельного класса (например, высокое изображение). Затем, в соответствующем разделе вашего css, просто установите для нежелательного класса изображения значение none, которое фактически оставит вас только с отображением соответствующих изображений (и будет определять размер карусели).