Комбинируя зум с MaxWidth

Question

Я пытаюсь сделать изображение изменения размера операции, где:

• Изображение Приклад на 2х размера (для Retina)
• Если устройство обнаружено низкое разрешение (стандарт), уменьшить изображение на 50% обратно в 1х (т.е. увеличение = 0,5)
• Если разрешение устройства не более 800, установить изображение не будет более 800 (т.е. MaxWidth = 800)

Однако, когда я объединить две операции (т.е. zoom = 0,5 & maxwidth = 800), это в основном дает мне изображение, которое составляет 800 x 50% = 400. Но я хотел бы, чтобы изображение сначала уменьшалось на 50% (например, если изображение было 2000w x 1000h, уменьшите его до 1000w x 500h), то убедитесь, что ширина не превышает 800 (т. е. 800w x 400h).

Есть ли способ приблизиться к этому?

Заранее благодарен!

Стивен

Answer 1

Zoomработает после того, как все другие операции калибровки, такие как ширина/высота/MaxWidth/MaxHeight. Это гарантирует, что вы можете добавить «масштабирование» в любую команду изображения и увеличить результат.

I.e, Zoom умножает размер результата, а не размер источника.

Если вы делаете отзывчивые изображения, вы должны рассмотреть trying slimmage.js. Это довольно удобно, если вы хотите эффективно обрабатывать как плотность пикселей, так и CSS-видовое окно или правила элемента.

Если вам действительно нужно создать собственное решение, вам нужно будет выполнить математику либо на стороне клиента (и установить максимальную ширину), либо на стороне сервера (и добавить команду, которая применяет ваши пользовательские правила).

Полное описание: Я написал Slimmage, так что я лично считаю, что это лучшее универсальное решение, конечно :)