Ознакомьтесь с нашей политикой обработки персональных данных
19:58 

Обрезка картинок c помощью html

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



Итак, вот наша картинка, размером 400х400 пикселей, украшенная некрасивой надписью внизу (все примеры кликабельны). Чтобы ее убрать, потребуется следующий код:

,
где width - желаемая ширина, height - желаемая высота.

На глазок отсекаю 40px, получается:

(Поскольку убирала только по высоте, ширину не вписывала).

Результат:

Обрезать по ширине и высоте :



Все бы хорошо, но таким способом можно обрезать только снизу и справа. Чтобы обрезать с нужной стороны, код чуть-чуть усложняется.
Смотреть примеры с кодами

@темы: Теги оформления записи, Добавление изображений

Комментарии
2013-07-21 в 21:08 

Kakou ECTb
жираф большой - ему видней
After silence that which comes nearest to expressing the inexpressible is music.
Только нужно уточнить, что если кто-то скопирует url картинки, останется она всё такой же, необрезанной :)
Легче воспользоваться одним из онлайн сервисов, который режет картинки как только угодно. Например, www.picresize.com/

2013-07-22 в 00:29 

Таши
Всему своё тайми-вайми (с)
:vo:

2013-07-22 в 01:32 

tlogin
Кто знает как сделать по-другому, делитесь)

Положить картинку на бэкграунд дива, задать диву ширину и высоту, а бэкграунду - нужный сдвиг. Размеры картинки решаются background-size. Заодно так вообще не скопируют урл картинки командой "копировать урл картинки" :)

2013-07-22 в 02:00 

*romantic dreamer*
предупре- дительный выстрел в голову
Можно еще вот тут над картинками издеваться. Обрезать , менять размер, редактировать.
www.avazun.ru/tools/obrezat/

2013-07-22 в 07:45 

Ezhikov
Dif bltz ytljcnfnjxyj ,tpevyf? xnj,s ,snm bcnbyjq
А зачем, если не секрет?
Почему просто не делать превью?

А вообще, для такого уже есть свойство css "clip", которое работает даже в IE8, хотя и только к блочным элементам (но вы же все равно помещаете картинку в див, правильно?).
htmlbook.ru/css/clip

2013-07-22 в 14:01 

tlogin
Ezhikov, htmlbook пишет, что работает только с абсолютом. Т.е. чтобы решить задачу топикстартера по идее надо ещё создать конструкцию с див позишн релатив, внутрь див позишн абсолют и плясать дальше, верно? :)

П.С. Спасибо за новое свойство. Правда пока не могу придумать задачу, под которую оно могло бы пригодиться, но интересно.

2013-07-22 в 17:54 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Легче воспользоваться одним из онлайн сервисов, который режет картинки как только угодно. Например, www.picresize.com/

Kakou ECTb, хорошая штука, лучше, чем обрезать кодом, но мы не ищем легких путей :-D

tlogin, но это надо, чтобы картинка была в БИ обязательно...

*romantic dreamer*, все хорошо, но тут надо загружать с компа, вот Kakou ECTb дал ресурс, там можно ссылку вставлять)

А зачем, если не секрет?
Почему просто не делать превью?

Ezhikov, не, не в это дело, а в обрезке куска)

есть свойство css "clip"
Да с помощью CSS есть не один способ, а если CSS не подключен? :what: Плюс забил границы, а чтобы сделать по-другому, это новый класс прописывать придется, так что ли? :hmm:

2013-07-22 в 18:11 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Kakou ECTb, ой, а прямые ссылки, оказывается, на www.picresize.com/ долго не живут, все равно надо скачивать измененную картинку?

2013-07-22 в 18:54 

quirischa
администратор
(с капибарой на аватарке)
Тайя, которая душит романтиков
Our site does not store any of your resized pictures on our servers unless you use the Save to Web feature. Your resized image is automatically deleted from our servers within 20 minutes, говорят они.

2013-07-22 в 18:58 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
quirischa, эх! Когда ж мы читали, что написано мелкими буквами, еще и по-забугорному) Теперь понятно, жаль)

2013-07-22 в 20:58 

Kakou ECTb
жираф большой - ему видней
After silence that which comes nearest to expressing the inexpressible is music.
Тайя, которая душит романтиков, А без понятия. Ну это же не сложно, залить к себе и потом снова на дайр :cheek:

2013-07-22 в 23:07 

Ezhikov
Dif bltz ytljcnfnjxyj ,tpevyf? xnj,s ,snm bcnbyjq
Да с помощью CSS есть не один способ, а если CSS не подключен?
тогда не будет никакого overflow: hidden ))

2013-07-23 в 18:12 

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

2013-07-24 в 07:59 

Ezhikov
Dif bltz ytljcnfnjxyj ,tpevyf? xnj,s ,snm bcnbyjq
Тайя, которая душит романтиков, вот я так и работаю. Пытаюсь делать хорошо, правильно и красиво, а менеджеры требуют без лишних телодвижений, чтобы быстро и дешево :(

2013-07-24 в 08:17 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Ezhikov, и они правы. В наше время нужно учиться все делать с наименьшими затратами времени и сил. Можно выбросить все программное обеспечение и считать все на калькуляторе, никто не спорит, что это тоже можно сделать хорошо и красиво) Если бы люди не хотели облегчить себе труд, мы дальше палок-копалок бы не продвинулись.

2013-07-24 в 18:30 

Ezhikov
Dif bltz ytljcnfnjxyj ,tpevyf? xnj,s ,snm bcnbyjq
Тайя, которая душит романтиков, они правы лишь отчасти. Кто потом будет это поддерживать? Мы же. А если поручат другому верстальщику? А если расширять и дополнять?
Я вот все никак из-за такого подхода не могу составить портфолио адекватное. Стыдно показывать результаты "вчера надо было из этого джепега сверстать три простых страницы, но сегодня я до последнего умолчу что страница теперь одна с горизонтальным параллакс-скроллом и, кстати, придумаем это мы завтра".

2013-08-06 в 07:11 

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

2013-08-06 в 13:12 

Таши
Всему своё тайми-вайми (с)
SHOUEI,

2013-08-07 в 00:02 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
SHOUEI, ага, как вот Таши сказала, проще всего двумя картинками.
Или вот как-то так:
читать дальше

2013-09-10 в 23:17 

Panterito
If I asked for a cup of coffee, someone would search for the double meaning. © Mae West
Ух ты, спасибо за пост, буду осваивать)

2013-11-06 в 12:26 

Bernadett-e
В море соли и так до чёрта, морю не надо слёз.
Заодно так вообще не скопируют урл картинки командой "копировать урл картинки"

бу-га-га - сказл любопытный юзверь, нажимая кнопочку поделиться и пырясь в код))

А так - спасибо, что напомнили.

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@Дневники: секреты, тонкости и хитрости

главная