Есть ли способ динамически определить, как изображение появляется на странице или в определенном макете? - PullRequest
Новая
       15

Есть ли способ динамически определить, как изображение появляется на странице или в определенном макете?

1 голос
/ 17 мая 2010

В течение очень долгого времени я сталкивался с проблемами при управлении изображением, имеющим необычно большую высоту или ширину.

Если я установлю их высоту и ширину, они будут выглядеть растянутыми?

Если я установил их ширину и если высота изображения очень велика, то это также испортит весь сайт.

Если я установил их высоту, и если ширина изображения очень большая, то это также испортит весь сайт.

Изображения, которые я сохраняю на локальном диске, сохраняются с сохранением соотношения? Допустим, пользователь решает загрузить изображение 1 (высота) * 32 (ширина). Когда он загружает это изображение, создается скрипт для изменения размера загружаемого пользователем изображения до высоты: 1000 пикселей (только пример)

Таким образом, полученное изображение в 1000px (высота) * 32000 (widht), теперь вы видите, что изображение ненормально большое.

Теперь при отображении этого изображения в коробке размером 1000px * 1000px, как лучше всего отобразить это изображение?

Ответы [ 5 ]

3 голосов
/ 17 мая 2010

Если вы пытаетесь изменить размер изображения 32x1 так, чтобы оно вписывалось в поле 1000x1000, вам не следует изменять высоту до 1000. Вместо этого вы должны изменить ширину до 1000 и высоту до 1000/32.

Пример кода может быть следующим: 

define(MAX_WIDTH, 1000);
define(MAX_HEIGHT, 1000);

if ($cur_width / MAX_WIDTH > $cur_height / MAX_HEIGHT)
{
   $new_width = MAX_WIDTH;
   $new_height = (int) ($cur_height * MAX_WIDTH / $cur_width);
}
else
{
   $new_width = (int) ($cur_width * MAX_HEIGHT / $cur_height);
   $new_height = MAX_HEIGHT;
}

Это проверяет, какое из измерений «больше» по сравнению с размерами блока, и соответственно устанавливает $ new_width и $ new_height. Убедитесь, что вы обрабатываете странные случаи, когда одно из измерений округляется до 0 (т. Е. Изображение размером 10000x1, вероятно, получит значение 1000x0).

0 голосов
/ 17 мая 2010

Вы можете использовать div с overflow: hidden;.

0 голосов
/ 17 мая 2010

А как насчет попытки подогнать (сохранить соотношение сторон) выходное изображение в конкретный прямоугольник?

0 голосов
/ 17 мая 2010

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

0 голосов
/ 17 мая 2010

Если я установлю их высоту и ширину, они будут выглядеть растянутыми?

Они будут искажены, если вы измените соотношение, и растянуты, если вы измените размер.

Если я установил их ширину и если высота изображения очень большая, то это также испортит весь сайт.

Изображение будет масштабироваться, сохраняя исходное соотношение x-y. Будет ли это «портить сайт», зависит от контекста.

Если я установил их высоту, и если ширина изображения очень велика, то это также испортит весь сайт.

То же самое

Как лучше всего это исправить?

Это зависит от ряда факторов, не в последнюю очередь от того, какова цель изображений. Да, мы снова вернулись к контексту.

Если я сделаю некоторые предположения о том, чего вы пытаетесь достичь, у вас, по сути, есть два варианта:

  • Обрезать изображение (возможно, после его масштабирования)
  • Рассчитайте отношение xy изображения, сравните его с отношением xy пространства, в которое вы хотите поместить его, используйте его, чтобы принять решение о его масштабировании (при сохранении соотношения сторон) к ширине пространства или высота помещения.
...