2

К примеру, есть верстка, в которой дабы работало красиво и кроссбраузерно большинство картинок задано через свойства сss background-image: url("..."), указан cover, position. Весь контент на странице динамический. Например вывод новостей, или есть много страниц, у которых один и тот-же стиль, но должны быть разные картинки в зависимости от контента страницы (остальной стиль одинаковый).

Так сделано потому что просто вставить <img src=""> и задать ему желанные свойства, чтобы картинка занимала всю поверхность блока и не деформировалась без костылей, очень проблематично.

Как динамически заменить url картинки в css?

Костыль - сделать джаваскриптом на клиенте - не предлагайте, так как это значит притянуть одну большущую картинку, потом на клиенте понять, что это не то, что вам нужно и притянуть еще одну большую картинку, вставив поправку непосредственно в html. Вариант вставить картинку через тег style непосредственно в html, тоже не очень красивый - хотя более интересный, чем джаваскрипт, для этого варианта есть одно но - зовут его ИЕ8, который мало того не понимает, что там написано, просто не зная background-size: cover и другие, картинку он вообще может брать из исходного стиля. В результате у вас может получиться что-то подобное: <div style="background-image: url("../img/exsample.png") ">....</div>. Что, согласитесь, не очень красиво для html.

Как сделать, используя php или ruby, или поделитесь как вы это делаете на своем фреймворке?

2
  • не обязательно фоном делать , можно работать и с тегом img вот пример jsfiddle.net/atlanta/vdkzxj9o
    – user33274
    26 дек 2015 в 15:11
  • 1
    Опишите нормально задачу и я вам подыщу решение. То, что вы хотите не совсем понятно и, возможно, имеет лучшее решение, чем вы представляете.
    – Steve
    26 дек 2015 в 16:01

1 ответ 1

1

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

.background-1 {
      url: ...
 }
.background-2 {
      url: ...
 }
.background-3 {
      url: ...
 }

Затем опишите создайте хелпер который будет возвращать нужный класс в зависимости от ваших условий, например так:

class MyCobtroller < ApplicationController
   attr_reader :background_class
   helper_method :background_class

   def action
     @background_class = 'background-1'
      ...
   end
 end

Далее в html используем метод.

 <div  class="<%= background_class %>"></div>
1
  • У меня в новостях 5000 картинок, вариант с беграундами непрокатит 20 мар 2016 в 18:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.