Перейти к содержимому



Как обрезать картинку?

#1 Вячеслав

Вячеслав
  • Пользователь
  • 371 сообщений
  • Репутация: 2
0

Отправлено 14 Март 2010 - 01:52

Привет друзья!!! :P

Блин столкнулся с такой ситуацией, на сайте в постах используеться превьюшка которая выводиться на главной - http://www.funkyduck.ru/index.php, и эта же превьюшка используеться в модулях, но там размер превью должен быть строго 100x100px, и если тупо масштабировать картинку под этот размер, будет искажение картинки т.к она имеет не пропорциональные размеры ширины и высоты.

Я посткпил так - картинка выводиться обычным размером, но заключена в теги <li><a><img></a></li> у которых фиксированная ширина и высота в 100px и owerflow:hidden; Тоесть отображаеться как видите - http://www.funkyduck.../portfolio.html только левый верхний угол изображения.

Вопрос как правильно масштабировать эту картинку, чтоб не искажалась и в тоже время была видна полностью, ну или большая ее часть???
Шото совсем туплю...
Всем спасибо!!!

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как обрезать картинку? Нужно уменьшить
  2. Как сделать картинку уникальной
  3. Как уникализировать картинку
  4. Массовая оптимизация картинок — уменьшение размера без потери качества
  5. Водяной знак на изображении.

#2 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 14 Март 2010 - 22:14

http://sexy.hohli.com/
  • 0

#3 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 371 сообщений
  • Репутация: 2

Отправлено 14 Март 2010 - 23:07

Спасибо за плагин!
Но здесь немного другое требовалось...

Вобщим решил пока сделать таким образом:

[code]
<li>
<a><img/></a>
</li>


li, a{
float:left;
height:100px;
margin:0 !important;
overflow:hidden;
padding:0 !important;
width:100px;
}
li a img{
margin-left:-20px;
width:160px;
}

Это при том то разрешение картинки 232x150px, тоесть ее никак нельзя сжать по ширене до 100px, потому то тогда по высоте она не будет 100px.
поэтому ужимаем до 160px при которых высота становитьс уть больше 100px (тоесть область ссылки заполняеться до низа, что и требовалось) и смещаем картинку на 20px в лево, дабы приблизиться к центру картинки (тоесть будет видна ее центральная часть, а не левая верхняя область как раньше).

Ну вот только такая мысля в голову пришла, если есть какие более эффективные, подскажите буду оч благодарен :P

Посмотреть тут
  • 0

#4 gaaarfild

gaaarfild
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 15 Март 2010 - 20:38

Единственная информативная строка - overflow:hidden; - что имеется ввиду, то, что не влезает в формат - прячется.
  • 0

#5 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 19 Март 2010 - 00:22

Вячеслав, я бы всёж для этих целей написал бы серверный скрипт.
  • 0

#6 gaaarfild

gaaarfild
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 22 Март 2010 - 11:24

А сделать это лучше для того, чтобы лишняя, ненужная картиночка не загружала траффик и не увеличивала время загрузки страницы.


  • 0

#7 Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 371 сообщений
  • Репутация: 2

Отправлено 28 Март 2010 - 19:08

Единственная информативная строка - overflow:hidden;


Не понял? что значит "информативная", я же картинку центрирую margi`nom...
А что из себя представляет этот серверный скрипт? как это реализовать, если можно ссылку почитать, спасибо.
  • 0

#8 gaaarfild

gaaarfild
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 28 Март 2010 - 23:58

Я к тому, что по данному вопросу ценной является только эта строка. Остальные - не относятся к решаемой проблеме. А насчет скрипта - это к библиотеке gdlib и вообще в раздел PHP или, например Perl.
  • 0

#9 yury

yury
  • Пользователь
  • 631 сообщений
  • Репутация: 179

Отправлено 29 Март 2010 - 07:43

...
А что из себя представляет этот серверный скрипт? как это реализовать, если можно ссылку почитать, спасибо.

Вячеслав,
посмотрите этот скрипт про вырезку из изображения произвольной и центральной областей
и этот про уменьшенную копию изображения
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru