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

[Тайя.]

Шерстила тут интернеты на предмет обрезки картинок средствами html, может кому пригодится.

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

<div style="overflow: hidden; width: XXpx;  height: XXpx;" ><img src="картинка.jpg"></div>

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

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

<div style="overflow: hidden; height: 360px;"><img src="http://static.diary.ru/userdir/1/8/2/8/1828072/78977633.jpg"></div>

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

Результат:

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

<div style="overflow: hidden; width: 250px; height: 250px;"><img src="http://static.diary.ru/userdir/1/8/2/8/1828072/78977633.jpg"></div>

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

Смотреть примеры с кодами

<div style="overflow: hidden; width: 250px; height: 250px;">
<div style="margin-top: -80px; margin-left: -75px;">
<img src="http://static.diary.ru/userdir/1/8/2/8/1828072/78977633.jpg">
</div>
</div>

Добавляются сдвиги. Относительно границ рисунка картинка сдвигается на 80px вверх и на 75px влево.

Еще пример. Кусок 350х100, сдвиг 135px по вертикали, 35px по горизонтали.

<div style="overflow: hidden; width: 350px; height: 100px;">
<div style="margin-top: -135px; margin-left: -35px;">
<img src="http://static.diary.ru/userdir/1/8/2/8/1828072/78977633.jpg">
</div>
</div>

205x220, сдвиг 135px по вертикали, 20px по горизонтали.

<div style="overflow: hidden; width: 205px; height: 220px;">
<div style="margin-top: -135px; margin-left: -20px;">
<img src="http://static.diary.ru/userdir/1/8/2/8/1828072/78977633.jpg">
</div>
</div>

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

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

Comments

[Kakou ECTb]

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

[Таши]

[tlogin]

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

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

[*romantic dreamer*]

Можно еще вот тут над картинками издеваться. Обрезать , менять размер, редактировать.
www.avazun.ru/tools/obrezat/

[Ezhikov]

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

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

[tlogin]

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

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

[Тайя.]

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

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

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

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

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

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

есть свойство css "clip"

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

[Тайя.]

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

[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, говорят они.

[Тайя.]

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

[Kakou ECTb]

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

[Ezhikov]

Да с помощью CSS есть не один способ, а если CSS не подключен?

тогда не будет никакого overflow: hidden ))

[Тайя.]

Kakou ECTb, хочется совсем без лишних телодвижений)))

[Ezhikov]

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

[Тайя.]

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

[Ezhikov]

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

[SHOUEI]

А как спрятать половину одной картинки? Потом кликаешь на картину и эта половина появляется?

[Таши]

SHOUEI,

[MORE=половина картинки.jpg]целая картинка.jpg[/MORE]

[Тайя.]

SHOUEI, ага, как вот Таши сказала, проще всего двумя картинками.
Или вот как-то так:

[MORE=<div style="overflow: hidden; height: 200px;"><img src="http://static.diary.ru/userdir/1/8/2/8/1828072/78977633.jpg"></div>]<img src="http://static.diary.ru/userdir/1/8/2/8/1828072/78977633.jpg">[/MORE]

[Panterito]

Ух ты, спасибо за пост, буду осваивать)

[Bernadett-e]

Заодно так вообще не скопируют урл картинки командой "копировать урл картинки"

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

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