Готовые тиражные решения на 1С-Битрикс
Техническая поддержка:
+7-908-208-1965
Отдел продаж, с 7:00 до 18:00 (по Москве)
Звонок по России бесплатный
Вы также можете заказать звонок

Примеры работы различных режимов масштабирования

Для эксперимента мы имеем два изображения, одно — горизонтальное 494x250 пикселов, а другое — вертикальное 320x480 пикселов.

Из этих двух изображений мы создадим миниатюры 220x180 пикселей качества 100, но будем использовать разные режимы масштабирования:

и посмотрим что из этого получится...

1. Режим работы "Вписать с заливкой оставшихся областей"
Изображение уменьшается пропорционально пока не окажется вписанным в заданную область. Оставшиеся пустоты будут залиты цветом, который указан в настройках Ресайзера (в нашем случае это голубой цвет.) Как вы видите, изображения всегда получаются четко одинакового размера, всегда по центру — ничто никуда не поедет.





2. Режим работы "Вписать без заливки оставшихся областей"
Этот режим работает так же как и предыдущий, за исключением того, что оставшиеся пустые области не заливаются, а просто отбрасываются. Вес таких картинок меньше чем в первом случае, а центрировать по вертикали и горизонтали их можно силами CSS.





3. Режим работы "Вписать по меньшей стороне и обрезать лишнее
В случае выбора этого режима работы, изображение сначала пропорционально уменьшается до тех пор пока меньшая сторона (высота или ширина) не упрется в заданную область, а затем выступающие за данную область части изображения обрезаются. Этот режим идеально подходит для организации представления множества изображений по типу "плитка".

 
 
 
4. Режим работы "Обрезать по ширине"
Тоже, что и предыдущий режим, но изображение обрезается только по ширине и только в том случае, когда после масштабирования оно выходит за заданную область по ширине. Выстота же никогда не обрезается. Данный режим предусмотрен для редких случаев когда именно высота так важна, что обрезать ее нельзя.





5. Режим работы "Обрезать по высоте"
Тоже, что и предыдущий режим, но изображение обрезается только по высоте и только в том случае, когда после масштабирования оно выходит за заданную область по высоте. Ширина же никогда не обрезается. Данный режим предусмотрен для редких случаев когда именно ширина так важна, что обрезать ее нельзя.





6. Режим работы "Вписать без заливки оставшихся областей" игнорируя ширину
Выбираем режим работы описанный в п.2, но ширину указываем заведомо недостижимой, например: 2200 x 180
Изображения в данном случае получаются разной ширины, но все одинаковой высоты и по этому они идеально подходят для организации горизонтальной карусельки-слайдера.



7. Режим работы "Вписать без заливки оставшихся областей" игнорируя высоту
Выбираем режим работы описанный в п.2, но высоту указываем заведомо недостижимой, например: 220 x 1800
Изображения в данном случае получаются разной высоты, но все одинаковой ширины и по этому они идеально подходят для организации вертикальной карусельки-слайдера.