Страница 1 из 212»
Форум » uCoz » Помощь по uCoz » Автоматическая настройка размера картинок
Автоматическая настройка размера картинок
_Galochka_ Offline
Проверенный
0
Дата: Пятница, 08.05.2015, 20:58 | Сообщение # 1
Как сделать чтобы картинки в новостной ленте выводились одинакового размера? http://ecomel.at.ua/ Заранее спасибо за помощь
Профиль
waak Offline
Проверенный
41
Дата: Пятница, 08.05.2015, 22:03 | Сообщение # 2
Здравствуйте просто добавте в конец вашей таблици стилей вот этот код

.eMessage img {
width: 200px;/*ширина картинки*/
height: 200px;/*высота картинки */
}

200px меняйте на то значение что вам подходит


Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт


Сообщение отредактировал waak - Пятница, 08.05.2015, 22:04
Профиль
CbIPoK Offline
Проверенный
37
Дата: Четверг, 14.05.2015, 22:32 | Сообщение # 3
Цитата waak ()
.eMessage img {
width: 200px;/*ширина картинки*/
height: 200px;/*высота картинки */
}


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

Код
.eMessage img {
max-width: 200px;/*Максимальная ширина картинки*/
max-height: 200px;/*Максимальная высота картинки */
}


Помог? Ставь + в репутацию! :3

Сообщение отредактировал CbIPoK - Четверг, 14.05.2015, 22:33
Профиль
partosikus Offline
Проверенный
0
Дата: Пятница, 15.05.2015, 13:00 | Сообщение # 4
У меня очень похожая проблема.
На сайте уже задан размер изображения 200х200. Но если размер больше, то отображается только кусочек 200х200 (я так понимаю, что об этом говорил господин CbIPoK). А мне нужно что бы отображало целое изображение в 200x200.
Иии конечно я понимаю что вопрос плёвый, но я ни бельмеса не понимаю в css.
Пытался поставить этот код
Код
.eMessage img {
max-width: 200px;/*Максимальная ширина картинки*/
max-height: 200px;/*Максимальная высота картинки */
}

но так и не нашёл куда его правильно воткнуть, что бы ничего нигде не разваливалось.

Помогите пожалуйста css не большой.
Код
body {background:#1E1E1E;margin:0;padding:0;
  font-family: Verdana;
  font-size: 10pt;
  color:#FFFFFF
}
img {border:0}

a {color:#3F7EFF;text-decoration:none}
a:hover, a:active {color:#3F7EFF;text-decoration:underline}

.top {width:860px;overflow:hidden}
.logo {position:absolute;z-index:2}

h1 {font-size:12pt;margin:0;margin-bottom:10px}

.uMenuV {width:860px;text-align:right;height:60px;background: url('/img/white.png') repeat-x bottom;padding:0}
.uMenuV ul {float:right}
.uMenuV ul, .uMenuV li {padding:0;margin:0;height:60px;list-style-type: none; list-style-position: inside}
.uMenuV li {float:left}
.uMenuV li a {margin:0;font-weight:bold;display:block;padding:22px;padding-left:14px;padding-right:14px;text-align:center;color:#9B9B9B}
.uMenuV li a:hover {color:#E1E1E1;text-decoration:none}

.uMenuV a.uMenuItemA, .uMenuV a.uMenuItemA:hover {font-weight:bold;color:white;background:url('/img/bt.gif') repeat-x top}

.nwV_o {width:860px}
.nwV {width:880px;overflow:hidden;margin-top:20px}
.nwV_p {width:860px;overflow:hidden}
.nw {width:200px;height:200px;background:#121212;overflow:hidden;float:left;margin-right:20px;margin-bottom:20px}
.nw .nim {position:absolute;width:200px;height:200px;overflow:hidden}
.nwT {padding:20px;color:white;text-align:left}
.nwT i {font-style:normal;font-size:8pt}

.bottom {color:#616161;text-align:left;width:860px;overflow:hidden;padding-top:21px;padding-bottom:20px;font-size:8pt;font-weight:bold;;background: url('/img/white.png') repeat-x top}
.bottom a, .bottom a:hover {color:#7A7A7A}
.copy {padding:0;margin:0}
.social, .social div {float:right;margin-left:10px}
.social img {width:26px;height:26px}
.twi img {background:url('/img/sc.png') 0 -26px}
.twi:hover img {background:url('/img/sc.png') 0 0}
.vko img {background:url('/img/sc.png') -26px -26px}
.vko:hover img {background:url('/img/sc.png') -26px 0}
.fac img {background:url('/img/sc.png') -52px -26px}
.fac:hover img {background:url('/img/sc.png') -52px 0}
.rss img {background:url('/img/sc.png') -78px -26px}
.rss:hover img {background:url('/img/sc.png') -78px 0}

.content {padding:20px;background:#121212;margin-top:20px;margin-bottom:20px;text-align:left}

.ow {display:table}
.img {width:200px;height:200px;margin-right:20px;overflow:hidden}
.lf {display:table-cell;vertical-align:top;}
.rg {display: table-cell;vertical-align:top;}

.catPages1 {display:block;height:28px;}
.swchItemA {float:left;padding:6px;padding-left:10px;padding-right:10px;color:#FFFFFF;background: url('/img/bt.gif') repeat-x bottom;font-weight:bold}
.swchItem {float:left;padding:6px;padding-left:10px;padding-right:10px;color:#9B9B9B;font-weight:bold}
.swchItem:hover {padding:6px;padding-left:10px;padding-right:10px;color:#E1E1E1;font-weight:bold;text-decoration:none}

.ess {display:block;color:#C9C9C9;padding-bottom:20px;font-weight:bold}
.ess:hover {color:#F2F2F2;text-decoration:none}
ul {list-style-type:square}
.catsTable td {text-align:left;font-size:8pt}
.catsTable {margin-bottom:20px}
.catNumData {color:#898989}  

textarea {resize:none}
textarea:focus, input:focus, select:focus {outline:none}

.manTd2 input[type="text"] {padding:5px;max-width:581px;border:1px solid #2D2D2D;background:#111111;color:#9B9B9B}
.manTdBrief textarea, .manTdText textarea {padding:5px;max-width:845px;border:1px solid #2D2D2D;background:#111111;color:#9B9B9B}  
.manTd2 input[type="text"]:focus, .manTdBrief textarea:focus, .manTdText textarea:focus {border:1px solid #3F7EFF;background:#171717;color:#FFFFFF}  

.edtTypeMenu {margin-right:20px}
hr {display:none}

.image-btn{
  display:block;
  margin:17px 0 0;
}
.image-down-file{
  display:inline-block;
  position:relative;
  background:#3F7EFF;
  border-bottom:2px solid #3F7EFF;
  font-size:13px;
  line-height:16px;
  color:#fff;
  text-decoration:none;
  padding:11px 20px 11px 46px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  text-align:left;
}
.image-down-file:hover{
  background:#3F7EFF;
  border-bottom:2px solid #3F7EFF;
}
.image-down-file img{
  position:absolute;
  left:20px;
  top:11px;
}
Профиль
MSerega Offline
Проверенный
92
Дата: Пятница, 15.05.2015, 16:33 | Сообщение # 5
Цитата partosikus ()
но так и не нашёл куда его правильно воткнуть, что бы ничего нигде не разваливалось.

Заходите в Панель управление » Управление дизайном » Таблица стилей (CSS) и можете либо найти сам класс .eMessage и после него написать .eMessage img или же в любое удобное место тот код о котором пишет

Цитата CbIPoK ()
eMessage img {
max-width: 200px;/*Максимальная ширина картинки*/
max-height: 200px;/*Максимальная высота картинки */
}


Помог? Ставь или поддержи проект.
Профиль
partosikus Offline
Проверенный
0
Дата: Пятница, 15.05.2015, 19:04 | Сообщение # 6
.eMessage в css вообще нет.
Вставлял в конец css этот код - не помогает.
Пошёл дальше, решил немного покопаться, нашёл в css такую строчку
Код
.img {width:200px;height:200px;margin-right:20px;overflow:hidden}

добавил туда тот же max-width: 200px;max-height:200px; - не помогает.

Дальше залез в Вид материалов и начал разбираться в отсылках на css.
Нашёл там класс .nw, в котором прописано:
Код
.nw {width:200px;height:200px;background:#121212;overflow:hidden;float:left;margin-right:20px;margin-bottom:20px}

И класс .nim:
Код
.nim {position:absolute;width:200px;height:200px;overflow:hidden}


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

Я правда не знаю что делать. Кто нибудь может глянуть на этот чёртов css?
Профиль
MSerega Offline
Проверенный
92
Дата: Пятница, 15.05.2015, 19:35 | Сообщение # 7
Цитата partosikus ()
Я правда не знаю что делать. Кто нибудь может глянуть на этот чёртов css?

Напиши в личку сайт я гляну


Помог? Ставь или поддержи проект.
Профиль
waak Offline
Проверенный
41
Дата: Пятница, 15.05.2015, 20:49 | Сообщение # 8
partosikus, Здравствуйте! тут всё просто тот код што вы ставите принимает параметры к классу eMessage а вам нужно вместо него подставить другой класс который обволакивает в виде материалах вашего модуля вывод картинки как я понял это класс .nim или .nw просто попробуйте ещё раз вставить вот этот код в конец вашей таблицы стилей

eMessage img {
max-width: 200px;/*Максимальная ширина картинки*/
max-height: 200px;/*Максимальная высота картинки */
}

но уже вместо eMessage
пропишите один из этих .nim или .nw
и тогда всё будет работать


Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт


Сообщение отредактировал waak - Пятница, 15.05.2015, 20:49
Профиль
CbIPoK Offline
Проверенный
37
Дата: Пятница, 15.05.2015, 21:06 | Сообщение # 9
partosikus, обьясни в каком блоке или теге (Например $MESSAGE$) нужно, чтобы картинка была определённого размера.

Помог? Ставь + в репутацию! :3
Профиль
MSerega Offline
Проверенный
92
Дата: Пятница, 15.05.2015, 21:42 | Сообщение # 10
Проблему решили в личке..

Помог? Ставь или поддержи проект.
Профиль
partosikus Offline
Проверенный
0
Дата: Пятница, 15.05.2015, 21:46 | Сообщение # 11
waak, CbIPoK спасибо за отзывчивость, проблема уже решена.
ОГРОООМНОЕ спасибо и самый жирный плюс за это MSereg'e.

Сначала в css было прописано следующее
Код
.nim img {width:200px; height:200px;}

Это решило проблему на половину - в каталоге файлов всё отображалось правильно, но на странице материала проблема оставалась.

Далее в css были немного изменены строки
Код
.ow {display:table}
.img {width:200px;height:200px;margin-right:20px;overflow:hidden}
.lf {display:table-cell;vertical-align:top;}


на это

Код
.ow {display:table;float:left;}
.lf {display:table-cell;vertical-align:top;}
.lf img {width:200px;height:200px;max-width:200px;max-height:200px;margin-right:20px;overflow:hidden}


И в Странице материала и комментариев к нему из этого элемента
Код
<div classs="lf">
<div class="img">
<img src="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>/img/1x1.gif<?endif?>"<?if($IMG_URL1$)?><?else?> width="200"<?endif?> alt="$ENTRY_NAME$" />
</div>
</div>

был удалён класс img и исправлена ошибка с 3 буквами "s" в слове "class"

И вот тогда всё полностью заработало.
Ещё раз ОГРОМНОЕ СПАСИБО MSerega! Всё это он сам заметил и решил мне помочь!

P.S. Денис, спасибо за шаблон (это бесплатный шаблон Mini), но тут вот ошибочки обнаружились. Я думаю, что за это с вас тоже плюсик для Сергея :D


Сообщение отредактировал partosikus - Пятница, 15.05.2015, 21:48
Профиль
waak Offline
Проверенный
41
Дата: Пятница, 15.05.2015, 21:51 | Сообщение # 12
partosikus, то есть по вашему только сергей заслужил плюсик за помощь вам?

Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
Профиль
BMS Offline
Проверенный
0
Дата: Среда, 23.12.2015, 06:40 | Сообщение # 13
Здравствуйте всем! Когда высота задается в пикселях это всё просто и понятно. Но вот вы мне подскажите как в "Вид материала" изображения в $MESSAGE$ ограничить в процентах?
Например в таблице CSS прописано
.eVid img{max-width:10%!important; max-height:10%!important;}
и в модуле "Вид материалов" команда
<div class="eVid">$MESSAGE$</div>
А почему нет ограничения по высоте?
Профиль
waak Offline
Проверенный
41
Дата: Среда, 23.12.2015, 14:16 | Сообщение # 14
BMS, Поменяйте проценты на конкретное число
Код
.eVid img{max-width:10%!important; max-height:120px;!important;}


Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
Профиль
BMS Offline
Проверенный
0
Дата: Четверг, 24.12.2015, 03:12 | Сообщение # 15
Вы наверное не прочитали первую строку моего вопроса ----
Когда высота задается в пикселях это всё просто и понятно.
Но я хотел удерживать высоту картинки в процентах что бы при разных разрешениях монитора размер оставался постоянный. Если бы это была конкретная картинка типа screen.jpg то это тоже без проблем. Но когда изображение находится в $MESSAGE$ то высота в процентах ни как не поддается !
Профиль
Форум » uCoz » Помощь по uCoz » Автоматическая настройка размера картинок
Страница 1 из 212»
Поиск: