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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 283.5 3 темы, 18 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 66 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 19.08.2018
Топ 5 участников по репутации


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

#1 Вячеслав

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

Отправлено 14 March 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
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как обрезать картинку? Нужно уменьшить
  2. Как увеличить качество уменьшаемой и обрезаемой картинки?
  3. Как сделать картинку уникальной
  4. Фото разных размеров, как сделать через css, вывод фото с одинаковыми пропорциям
  5. Изменение размера картинки при уменьшении окна браузера

#2 surfer

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

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

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

#3 Вячеслав

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

Отправлено 14 March 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 March 2010 - 20:38

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

#5 ZiTosS

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

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

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

#6 gaaarfild

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

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

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


  • 0

#7 Вячеслав

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

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

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


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

#8 gaaarfild

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

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

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

#9 yury

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

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

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

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

robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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