Image stack. Изменить размер изображений

Параметр и как он работает 

Пример

Width

Параметр width сжимает картинку с сохранением
пропорций исходной картинки.

Через параметр width вы указываете
ширину новой картинки в пикселях.
Высота будет автоматически рассчитана так,
чтобы сохранить пропорции исходной картинки.

Пример: на сервере-источнике картинка
размером 500 (ширина) × 490 (высота).
Вы указываете новое значение ширины width=300.
Ширина и высота уменьшатся,
и вы получите изображение размером 300х294.

​До: image.jpg

После: image.jpg?width=300

Height

Параметр height сжимает картинку с сохранением
пропорций исходной картинки.

Через параметр height вы указываете
высоту новой картинки в пикселях.
Ширина будет рассчитана автоматически так,
чтобы сохранить пропорции исходной картинки.

Пример: на сервере-источнике картинка
размером 500 (ширина) × 490 (высота).
Вы указываете новое значение высоты height=300.
Высота и ширина уменьшатся,
и вы получите изображение размером 306х300.

До: image.jpg

После: image.jpg?height=300

Fit

Параметр fit настраивает,
как именно будет уменьшена картинка:
обрезана по краям, сжата пропорционально
исходной картинке или сжата с игнорированием
пропорций исходного изображения.

Чтобы использовать fit, нужно указать
в параметрах и ширину, и высоту
будущего изображения, а уже после
добавить параметр fit. Вот так:
image.jpg?width=300&height=100&fit=…

Если вы укажете только высоту и ширину
и не укажете параметр fit, сработает значение
по умолчанию — fit=fit. 

Fit может принимать четыре значения, о которых рассказываем ниже.

До: image.jpg

1. fit=fit

Картинка будет иметь ширину и высоту,
которые вы указали в width и height.
Лишние пиксели будут равномерно
обрезаны по краям.

Пример: размеры исходной картинки 500×490,
а вы указали новую ширину 200, высоту 100 и fit=fit.
Чтобы размер итоговой картинки был 200×100,
сверху и снизу будет отрезано по 195 пикселей,
а слева и справа — по 150.

1. После: image.jpg?width=200&height=100&fit=fit или 

image.jpg?width=200&height=100

2. fit=bounds

Картинка будет уменьшена пропорционально.
Во время уменьшения из значений
width и height Изменение размера
выберет большее и будет
ориентироваться на него, а второе проигнорирует.

Так, размер большей стороны
будет таким, как вы указали.
А размер меньшей — изменится,
чтобы сохранить соотношение сторон
оригинальной картинки.

Пример: на сервере-источнике картинка
со сторонами 500×490 пикселей.
Вы указали итоговую ширину 200,
высоту 100 и fit=bounds.

Как будет действовать операция:
1) Сравнит значения ширины и высоты
и выберет наибольшее.
В данном случае наибольшее — ширина (200).
Значение высоты операция проигнорирует.

2) Рассчитает пропорции исходного изображения.
В данном случае это 500×490,
то есть высота в 1.02 раза меньше ширины.

3) Уменьшит картинку, взяв за основу данные:
ширина 200, высота должна быть
в 1.02 раза меньше ширины.
Значит, высота должна быть 196.
Операция уменьшит картинку до размера 200×196.

2. После: image.jpg?width=200&height=100&fit=bounds

3. fit=cover

Картинка будет уменьшена пропорционально.
Во время уменьшения из значений
width и height Изменение размера
выберет меньшее и будет ориентироваться на него,
а второе проигнорирует.

Так, размер меньшей стороны
будет таким, как вы указали.
А размер большей — изменится,
чтобы сохранить соотношение сторон
оригинальной картинки.

Пример: на сервере-источнике картинка
со сторонами 500×490 пикселей.
Вы указали итоговую ширину 200, высоту 100
и fit=cover.

Как будет действовать Изменение размера:

1) Сравнит значения ширины и высоты
и выберет наименьшее.
В данном случае наименьшее — высота (100).
Значение ширины операция проигнорирует.

2) Рассчитает пропорции исходного изображения.
В данном случае это 500×490,
то есть ширина в 1.02 раза больше высоты.

3) Уменьшит картинку, взяв за основу данные:
высота 100, ширина должна быть
в 1.02 раза больше высоты.
Значит, ширина должна быть 102.
Операция уменьшит картинку до размера 102×100.

3. После: image.jpg?width=200&height=100&fit=cover

4. fit=force

У итоговой картинки будут те ширина и высота,
которые вы укажете в параметрах.
Картинка сожмётся по ширине и высоте,
даже если это нарушает
пропорции исходного изображения.

4. После: image.jpg?width=200&height=50&fit=force