• Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Проблема в CSS при увеличении изображения
egorkriv05
Четверг, 09 Апреля 2020, 20:44 | Сообщение 1
Оффлайн
Пользователи
Сообщений:13
Награды: 0
Здравствуйте, прошу прощение, но вопрос не по Ucoz. Есть сайт муниципального учреждения - Музея. Ссылка - museum-syktyvdin.ru/news Вопрос по разделу "Новости" Больше сюда по своему сайту, который НЕ на Ucoz писать не буду.

На данный момент:



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

Но мне чтобы изображение было крупнее. Попытался прописать вот итог:



Фотографии ужасного качества и нет промежутка между изображением и текстом. Помогите пожалуйста решить проблему. Это очень важно.

ВОТ СТИЛЬ С МОИМИ ИЗМЕНЕНИЯМИ
Код
element.style {
}
.news-list-image img {
    display: block;
    width: 200px;
}
img {
    border: 0;
}
img {
    border: 0;
    margin: 0;
    padding: 0;
}
.content a:visited {
    color: #33f;
}
.content a {
    color: blue;
}
.content a {
    color: #00c;
    text-decoration: underline;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
.background-0 {
    color: #000;
    font-family: 'PT Serif',serif;
    font-size: 15px;
}
body, .background-0 {
    background: #fff;
    color: #000;
    font-family: Arial,Verdana,sans-serif;
    font-size: 12px;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}
body {
    margin: 12 auto;
    padding: 0;
    font: 78% Arial, Helvetica, sans-serif;
    background: #e6fff5;
}
body {
    background: #fff;
    color: #000;
    line-height: 1;
}

user agent stylesheet
html {
    color: -internal-root-color;


Добавлено (2020-04-09, 21:42)
---------------------------------------------
Нужно, чтобы изображение было увеличено, а не такое маленькое и был промежуток был между фото и текстом. В ccs копался но не получается.
Прикрепления: 4375150.jpg (138.1 Kb) · 9167627.jpg (105.7 Kb)
Страна: (RU)
YaVi
Четверг, 09 Апреля 2020, 22:06 | Сообщение 2
Оффлайн
Vip
Сообщений:40
Награды: 3
Замени в стилях
Код
.news-list-image {
    -moz-border-radius: 2px;
    background-color: #fff;
    border: 1px solid #cdcdcd;
    border-radius: 2px;
    float: left;
    padding: 3px;
}

На это
Код
.news-list-image {
    -moz-border-radius: 2px;
    background-color: #fff;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    float: left;
    padding: 5px;
    width: 150px;
}


Далее
Код
.news-list-image img {
    display: block;
    width: 92px;
}

На Это
Код
.news-list-image img {
    display: block;
    width: 150px;
    height: auto;
}


uFive.Ru - Лучшее для web мастеров

Сообщение отредактировал
-SAM- - Воскресенье, 12 Апреля 2020, 18:38
Страна: (RU)
YaVi
Четверг, 09 Апреля 2020, 22:07 | Сообщение 3
Оффлайн
Vip
Сообщений:40
Награды: 3
И это
Код
.news-list-desc {
    margin-left: 120px;
}

На это
Код
.news-list-desc {
    margin-left: 170px;
}


Посмотри результат.


uFive.Ru - Лучшее для web мастеров

Сообщение отредактировал
-SAM- - Воскресенье, 12 Апреля 2020, 18:38
Страна: (RU)
-SAM-
Пятница, 10 Апреля 2020, 03:37 | Сообщение 4
Оффлайн
Друзья сайта
Сообщений:897
Награды: 40
Цитата YaVi ()
.news-list-image {
-moz-border-radius: 2px;
background-color: #fff;
border: 1px solid #cdcdcd;
border-radius: 3px;
float: left;
padding: 5px;
width: 150px;
}
Правки в это вносить не нужно. Если делать более закругленной рамку, то нужно менять и свойство -moz-border-radius (а для кроссбраузерности еще можно дописать -webkit-border-radius). Больший отступ от картинки до рамки - опять же, что не просили этого: потом по стилистике будет отличаться от тех рамок, что у картинок в левом контейнере. Ширина там не нужна, она указывается для img ведь, но если прописать - будет блок прорисован такой ширины, до того как картинка не загрузиться.

В общем, вот:

.news-list-image img {
display: block;
width: 92px; --> менять на нужное значение ширины (высоту можно не указывать, она и так по умолчанию auto - подстраивается исходя от ширины).
}

С отступом внешним слева(margin-left) у блока описания - правильно.

P.S.: egorkriv05, здесь не в том дело, чтобы за помощью не обращались, а просто такие темы нужно делать не в этом форуме, раз нет вопроса по системе - сразу в Просьба/Услуга (мол, помогите переписать код). И даже более - можно одну тему создать и вести там (мало ли, если какой элемент на сайте еще поменять придётся - куча ненужных тем остальным, они технического плана... и тем более, если для одно и того же сайта помощь оказывается).




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Пятница, 10 Апреля 2020, 04:39
Страна: (UA)
egorkriv05
Пятница, 10 Апреля 2020, 20:00 | Сообщение 5
Оффлайн
Пользователи
Сообщений:13
Награды: 0
-SAM-, все вставил в стиль, это в телефоне. А на компьютере вообще ничего не изменилось.



А по идее должно быть так ( в пэйнте отредактировал)

Прикрепления: 4839525.jpg (168.7 Kb) · 5519138.jpg (76.9 Kb)
Страна: (RU)
-SAM-
Суббота, 11 Апреля 2020, 04:11 | Сообщение 6
Оффлайн
Друзья сайта
Сообщений:897
Награды: 40
Кеш чистить нужно и править только то, что написали.

Вот строчки в Main.css:
Код
.news-list-image img{display:block;width:92px}.news-list-desc{margin-left:120px}

Поменять на это, как пример:
.news-list-image img{display:block;width:150px}.news-list-desc{margin-left:170px}




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Суббота, 11 Апреля 2020, 04:52
Страна: (UA)
egorkriv05
Суббота, 11 Апреля 2020, 08:35 | Сообщение 7
Оффлайн
Пользователи
Сообщений:13
Награды: 0
Ничего не изменилось. Вот все, что я вставил в стиль.
Код

.news-list-image img{display:block;width:150px}.news-list-desc{margin-left:170px}
.news-list-image {
-moz-border-radius: 2px;
background-color: #fff;
border: 1px solid #cdcdcd;
border-radius: 3px;
float: left;
padding: 5px;
width: 150px;
}
.news-list-image img {
display: block;
width: 150px;
}
Страна: (RU)
-SAM-
Воскресенье, 12 Апреля 2020, 14:20 | Сообщение 8
Оффлайн
Друзья сайта
Сообщений:897
Награды: 40
Я выше дал код, как и сказал где править и на что. Зачем было ставить тот стиль, что не нужно было - прикола ради, видимо. В общем, чего выше код написали вы, то меняйте на это:
Код
.news-list-image{-moz-border-radius:2px;background-color:#fff;border:1px solid #cdcdcd;border-radius:2px;float:left;padding:3px}.news-list-image img{display:block;width:150px}.news-list-desc{margin-left:170px}
Далее чистите кеш, проверяйте. Если не поменялось - значит вы что-то не то правите (а не проблема в коде, что вам дают).

UPD.: таки да, вы вообще правите не то, что нужно и ломаете стилизацию. Править нужно в Main.css. А вы ломаете стиль ваш.сайт/filestore/design/custom.css (вам объяснить в чём ошибка? разметку учите).

P.S.: тему можно давно закрыть, ибо помощь оказана была (разобран вопрос), если не могут применить - не наши ведь проблемы, от незнания основ html и css просто набивка постов.

UPD.2: закрыл тему, поскольку суть еще в личке расписал. Пока файл custom.css поломан, и там пытаются стили записать - браузер будет эту таблицу стилей не воспринимать должным образом (оно не будет изменять).

UPD.3: одну проблему решили (починил файл и скинул в личку).
Цитата egorkriv05 ()
Добрый день. Огромное Вам спасибо! Сейчас фотографии увеличились, но появилась проблема: почему-то фотографии ужасного качества. хотя загружаю хорошего.
Там изображения маленького размера (физического) указаны в src:
Код
http://www.museum-syktyvdin.ru/filestore/uploaded/019_8_thumbnail.jpg
То есть когда они были внешне(в css) размером в 92px, а мы поставили больше - стали видны артефакты (они присущи для растровой графики, тем более, если это jpg). Нужно в виде материалов вместо thumbnail - grid220 прописать:
Код
http://www.museum-syktyvdin.ru/filestore/uploaded/019_8_grid220.jpg
Стилями это не решить, нужно править код исходный в html.

UPD.4: можно еще сделать скриптом подмену пути к изображению. Но это не из лучших решений (что поделать, если не найдете, где оно конкретно меняется там в шаблоне).

В общем, в секции head (сразу перед </head>) должен быть прописан такой скрипт, мной написанный:
Код
<script type="text/javascript">
//Увеличиваем размеры изображений в новостях
 if (window.location.href.indexOf("/news/") > -1) {
$(document).ready(function() {
 $('.news-list-image > img[src*="thumbnail."]').each(function(){
$(this).attr('src', $(this).attr('src').replace(/thumbnail(\.[^.]+)?$/, 'grid220$1'));
 });
});
 }
</script>
Работоспособность проверена в браузере, если что.

UPD.5:
Цитата egorkriv05 ()
Вопрос: как ещё крупнее сделать изображение?
В файле custom.css есть строки:

/* Увеличиваем размеры изображений в новостях */
.news-list-image img {width:150px !important}
.news-list-desc {margin-left:170px !important}
/*-----*/

Красным отметил ширину картинки. Зеленым - отступ.

То есть, если ширину поставить 200px,
то отступ уже нужно ставить 220px.

UPD.6:
Цитата egorkriv05 ()
Не подскажете , как можно сделать, чтобы в новостях изображение всегда было одного размера?
Чтобы одного размера были, нужно указать фиксированную высоту(height) там в стиле:

.news-list-image img {width:150px !important;height:150px}

Можно сделать еще так:

/* Увеличиваем размеры изображений в новостях */
.news-list-image {width:200px;height:150px}
.news-list-image img {width:100% !important;height:100%; object-fit:cover;object-position:top}
.news-list-desc {margin-left:220px !important}
/*-----*/

Потом картинки будут иметь пропорциональные размеры (внешне смотрится приличнее, как считаю). Если убрать отмеченное фиолетовым, то картинка будет видна целиком.




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".


Сообщение отредактировал
-SAM- - Суббота, 25 Апреля 2020, 04:47
Страна: (UA)
  • Страница 1 из 1
  • 1
Поиск: