|
Автоматическая настройка размера картинок
|
|
Дата: Пятница, 2015-05-08, 20:58 | Сообщение # 1Как сделать чтобы картинки в новостной ленте выводились одинакового размера? http://ecomel.at.ua/ Заранее спасибо за помощь
|
Дата: Пятница, 2015-05-08, 22:03 | Сообщение # 2Здравствуйте просто добавте в конец вашей таблици стилей вот этот код
.eMessage img {
width: 200px;/*ширина картинки*/
height: 200px;/*высота картинки */
}
200px меняйте на то значение что вам подходит
Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
Сообщение отредактировал waak - Пятница, 2015-05-08, 22:04
|
Дата: Четверг, 2015-05-14, 22:32 | Сообщение # 3Цитата waak (  ) .eMessage img {
width: 200px;/*ширина картинки*/
height: 200px;/*высота картинки */
}
А чтобы они не растягивались, а имели стандартную пропорцию, используйте такой код
Код .eMessage img {
max-width: 200px;/*Максимальная ширина картинки*/
max-height: 200px;/*Максимальная высота картинки */
} Сообщение отредактировал CbIPoK - Четверг, 2015-05-14, 22:33
|
Дата: Пятница, 2015-05-15, 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;
}
|
Дата: Пятница, 2015-05-15, 16:33 | Сообщение # 5Цитата partosikus ( ) но так и не нашёл куда его правильно воткнуть, что бы ничего нигде не разваливалось.
Заходите в Панель управление » Управление дизайном » Таблица стилей (CSS) и можете либо найти сам класс .eMessage и после него написать .eMessage img или же в любое удобное место тот код о котором пишет
Цитата CbIPoK ( ) eMessage img {
max-width: 200px;/*Максимальная ширина картинки*/
max-height: 200px;/*Максимальная высота картинки */
}
Помог? Ставь  или поддержи проект.
|
Дата: Пятница, 2015-05-15, 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?
|
Дата: Пятница, 2015-05-15, 19:35 | Сообщение # 7Цитата partosikus ( ) Я правда не знаю что делать. Кто нибудь может глянуть на этот чёртов css?
Напиши в личку сайт я гляну
Помог? Ставь или поддержи проект.
|
Дата: Пятница, 2015-05-15, 20:49 | Сообщение # 8partosikus, Здравствуйте! тут всё просто тот код што вы ставите принимает параметры к классу eMessage а вам нужно вместо него подставить другой класс который обволакивает в виде материалах вашего модуля вывод картинки как я понял это класс .nim или .nw просто попробуйте ещё раз вставить вот этот код в конец вашей таблицы стилей
eMessage img {
max-width: 200px;/*Максимальная ширина картинки*/
max-height: 200px;/*Максимальная высота картинки */
}
но уже вместо eMessage
пропишите один из этих .nim или .nw
и тогда всё будет работать
Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
Сообщение отредактировал waak - Пятница, 2015-05-15, 20:49
|
Дата: Пятница, 2015-05-15, 21:06 | Сообщение # 9partosikus, обьясни в каком блоке или теге (Например $MESSAGE$) нужно, чтобы картинка была определённого размера.
|
Дата: Пятница, 2015-05-15, 21:42 | Сообщение # 10Проблему решили в личке..
Помог? Ставь или поддержи проект.
|
Дата: Пятница, 2015-05-15, 21:46 | Сообщение # 11waak, 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), но тут вот ошибочки обнаружились. Я думаю, что за это с вас тоже плюсик для Сергея 
Сообщение отредактировал partosikus - Пятница, 2015-05-15, 21:48
|
Дата: Пятница, 2015-05-15, 21:51 | Сообщение # 12partosikus, то есть по вашему только сергей заслужил плюсик за помощь вам?
Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
|
Дата: Среда, 2015-12-23, 06:40 | Сообщение # 13Здравствуйте всем! Когда высота задается в пикселях это всё просто и понятно. Но вот вы мне подскажите как в "Вид материала" изображения в $MESSAGE$ ограничить в процентах?
Например в таблице CSS прописано
.eVid img{max-width:10%!important; max-height:10%!important;}
и в модуле "Вид материалов" команда
<div class="eVid">$MESSAGE$</div>
А почему нет ограничения по высоте?
|
Дата: Среда, 2015-12-23, 14:16 | Сообщение # 14BMS, Поменяйте проценты на конкретное число
Код .eVid img{max-width:10%!important; max-height:120px;!important;}
Помог? ставь +
Разработка дизайна - верстка, помощь по установке шаблона на uCoz.
Связь
skype - tolik-waak
Мой сайт
|
Дата: Четверг, 2015-12-24, 03:12 | Сообщение # 15Вы наверное не прочитали первую строку моего вопроса ----
Когда высота задается в пикселях это всё просто и понятно.
Но я хотел удерживать высоту картинки в процентах что бы при разных разрешениях монитора размер оставался постоянный. Если бы это была конкретная картинка типа screen.jpg то это тоже без проблем. Но когда изображение находится в $MESSAGE$ то высота в процентах ни как не поддается !
|
