• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Обрезать картинку в статье
Обрезать картинку в статье
xaNDer0630
Сообщений: 22
Репутация: 2

Сообщение # 1 | 17:42:51
Что можно придумать чтобы картинка вставленная при добавлении материала была одинаковых размеров.
К примеру добавляем материал вставляем в описание картинку в визуальном редакторе без кода $IMAGE$ и она была определенных размеров в статье.
-SAM-
Сообщений: 156
Репутация: 46

Сообщение # 2 | 18:06:34
xaNDer0630, если речь идёт о постере, то есть смысл выводить шаблонно, то есть через форму добавления материала прикреплять изображение, а через редактор шаблона сделать вывод уже этой прикреплённой картинки. За ширину отвечает width, за высоту - height : http://htmlbook.ru/html/img/width
Если речь идёт уже о множестве добавленных материалов, что нужно чтобы везде в них была картинка заданных размеров, что каждый материал править проблематично - прописать можно в таблицу стилей свойства эти на размеры.

Ex-ID: 179703 [11 Авг 2012]
xaNDer0630
Сообщений: 22
Репутация: 2

Сообщение # 3 | 18:16:07
Так и нужно для множества.
.eMessage img чего туда присобачить такого чтобы картинка была одного размера но сохраняла пропорции.
Допускаем есть картинка 1000х600пх , окей она в материале становиться 500х300пх благо .eMessage img установив там ширину , необходимо обрезать ее по высоте к примеру 500х150пх.
Ну как то так

Картинка добавляется при написании статьи. Без использования бекграунд
Сообщение отредактировал xaNDer0630 - Воскресенье, 12 Июл 2015, 18:17:11
-SAM-
Сообщений: 156
Репутация: 46

Сообщение # 4 | 18:35:58
xaNDer0630, прописывается max-height и max-width в таблицу стилей (лучше в самый низ таблицы стилей и с !important). Собственно, такое нужно прописывать и для аватарок, изображений в постах форума, а еще ограничение на подпись пользователя (чтобы подобного рода изображения не портили шаблон сайта) - это как совет.

Ex-ID: 179703 [11 Авг 2012]
Сообщение отредактировал -SAM- - Воскресенье, 12 Июл 2015, 18:49:51
xaNDer0630
Сообщений: 22
Репутация: 2

Сообщение # 5 | 18:55:57

Цитата
Вот что происходит с изображениями нужно чтобы они резались а не смещались
Прикрепления: 5637364.jpg (471.9 Kb)
-SAM-
Сообщений: 156
Репутация: 46

Сообщение # 6 | 19:29:01
Не понимаю, чего значит резались? Вы задаете им изменение размеров, которые подбираете под своё разрешение экрана и каркас шаблона сайта. Если вам нужно, чтобы изображения большие были справа частично не видны, то тут уже идёт переписка середины шаблона сайта, судя по всему... задается http://htmlbook.ru/css/overflow hidden (как-то так).

Ex-ID: 179703 [11 Авг 2012]
Сообщение отредактировал -SAM- - Воскресенье, 12 Июл 2015, 19:32:55
xaNDer0630
Сообщений: 22
Репутация: 2

Сообщение # 7 | 19:49:43
Нет.
Вот тут 400пх допустим в высоту нужно чтобы было 200пх притом изображение не должно быть как на втором рисунке , а обрезанным допустим по середине.
Притом это изображение добавляется вместе со статьей не используется как бегграунд.
Прикрепления: 7165264.jpg (452.0 Kb) · 6791986.jpg (464.6 Kb)
-SAM-
Сообщений: 156
Репутация: 46

Сообщение # 8 | 20:40:04
Цитата xaNDer0630 ()
обрезанным допустим по середине
Цитата xaNDer0630 ()
не используется как бегграунд
Думаю, можно скриптом обернуть изображения эти в отдельный div-блок, а уже этому блоку отдельный css-класс и соответственно стилизацию прописать, чтобы была фиксированная высота, подрезка. Или вообще скриптом сделать, чтобы было изображение это задним фоном блока, а этот фон - по центру. Для этих целей используется before и after (что в css, что в jQuery).

Ex-ID: 179703 [11 Авг 2012]
xaNDer0630
Сообщений: 22
Репутация: 2

Сообщение # 9 | 21:52:58
Тему можно закрывать , решение "Вид материала" 
Код
<div style="width: 540px;height: 200px; border-radius: 5px; overflow: hidden;"><img src="$IMG_URL1$" style="position: inherit; margin-top: -70px;" /></div>
Сообщение отредактировал xaNDer0630 - Воскресенье, 12 Июл 2015, 21:53:20
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Обрезать картинку в статье
  • Страница 1 из 1
  • 1
Поиск: