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

Сервис обмена электронных валют

Партнерская программа Kredov

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

#1 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0
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

#2 surfer

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

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

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

#3 Вячеслав

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

Отправлено 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
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 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
  • Пользователь
  • 629 сообщений
  • Репутация: 176

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

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

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

robot

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


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