Иногда бывает нужно вывести вьюсом картинку, которая заполняла бы весь блок и масштабировалась при его уменьшении/увеличении. Например, мы выводим через views заголовок и картинку материала в резиновом блоке (ширина блока выставлена в процентах), чтобы при уменьшении окна браузера блок сжимался. Тут-то в друпале и начинаются проблемы, так как по дефолту вьюс выводит поле image либо в оригинальном размере, либо в одном из выбранных стилей изображения. Среди дефолтных стилей, которые можно выбрать, резинового изображения нет. И создать его стандартными функциями не выходит, ибо друпал предлагает хоть и произвольный, но все же фиксированный размер для любого из стилей. Фиксированный размер изображения в резиновом блоке нам не подходит, т.к если блок расширится, то изображение будет некрасиво висеть в оригинальном размере, оставляя часть блока пустым, а если блок сожмется, то изображение и вовсе вылезет за его пределы.
В интернете как то не особо много мануалов о том, ка же все-таки вывести в друпаловском вьюсе резиновые картинки в поле image, поэтому я нашел свой способ и сейчас его опишу.
Создаем нужный views, добавляем в вывод поле с картинкой и заголовок
Теперь идем в css-файл нашей темы и добавляем туда вот такие стили:
float:left;
margin-left:1em;
line-height: 1;
width:23%;
}
.title-text{
max-width:270px;
margin-bottom:1em;
min-height:4em;
text-align:center;
line-height: 1.6;
}
Теперь добавим эти стили блоку и заголовку, соответственно. Т.е. стиль title-text мы зададим полю заголовка.
А стиль title-block добавим ко всем блокам, нажав на кнопку Настройка в разделе Формат нашего вьюса.
Таком образом, мы настроили вьюс на последовательный вывод блоков шириной 23%, содержащих Картинку и Заголовок. Но картинка пока выводится фиксированным размером и не подстраивается под размер блока. Для того, чтобы это изменить, нам нужно присвоить изображению определенный класс, но присвоить его напрямую тегу img в этом поле мы не можем, так как если сделать также как мы делали с заголовком, то класс присвоится не к img, а к div'у, в который друпал обернет img.
Нам же нужно добраться именно до img, поэтому мы поступим следующим образом: обернем img таким же div'ом как в прошлый раз и присвоим ему класс testport, а в css-файл добавим следующую конструкцию:
width:100%;
height:100%;
}
Такая конструкция позволит нам обратится к изображениям, которые лежат в div'ах с классом testport.
Теперь наши изображения подстраиваются под размер родительского div'а, которому мы указали ширину в 23%. Задача выполнена, изображения стали резиновыми!