Cообщество пользователей SMF

Вот, на хостинг благополучно переехал, домен прикрутил, новая напасть возникла.
Вверху форума есть изображение с надписью на всю ширину. Его в теме оформления добавил.
Его размеры 1990*229. У меня монитор 1920*1080, соотв. оно не обрезается справа.
Зашел на форум под монитором 1280*1024, обрезано справа.
Я так понял нужна правка css, в какой css в теме оформления нужно залазить и где там править, там в теме много css.
и такой пример должен быть:
<img src="http://i73.fastpic.ru/big/2016/0214/5a/ffccaf8212397818c5e596f1efa5305a.jpg" max-width="100%" height="229"></a>Т.е.  макс. ширина в 100% ?

Правильный код или нет?

Цитата: makssun от 14 февраля 2016, 22:08:43Т.е.  макс. ширина в 100% ?

Правильный код или нет?

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

http://bittogether.com/
собсно вот.
хочу чтоб заглавное изображение масштабировалось под разрешение экрана, а не обрезалось.

В вашем случае там проблема в родительском блоке изображения. Вернее в одном из родительских блоков, который с id "header" . У него прописаны отступы.
Соответственно есть вариант убрать их у него. Но тогда вообще вся шапка и меню станут без отступов и придётся их принудительно задавать именно им.

Как называется css?
а что нельзя в него вставить правильный код ,чтоб изображение подгонялось под разрешение экрана?

В css оно вот так примерно выглядит у вас.
#header {
    background: #fefefe url("../images/theme/main_block.png") no-repeat scroll 0 -480px;
    padding-left: 20px;
}А вставить нельзя так как зависит от родительских блоков.

И что в этом коде нужно изменить?

Убрать
padding-left: 20px;
Ну и посмотреть как будет, так как сдвинется не только картинка, но и менюшка. Впрочем совсем в край экрана она не уедет, так как у неё заданы свои отступы. посему может оно и нормально окажется. Если всё-таки нет, то заменить
#main_menu {
    float: left;
    margin: 0;
    padding: 0 0.5em;
    width: 98%;
}
на что-нибудь вроде
#main_menu {
    float: left;
    margin: 0;
    padding: 0 25px 0 0.5em;
    width: 98%;
}


Я так понял нужно открыть файл темы оформления admin.css, и убрать padding-left: 20px;
но ведь padding - задает внутренний отступ со всех сторон, в зависимости количества значений.
А мне нужно адаптивно чтоб картинка на заглавном изображении подстраивалась под разрешение экрана.
в html таквыглядит код отвечающий за это изображение
<iframe id="css_preview_box" name="css_preview_box" src="about:blank" width="99%" height="300" frameborder="0" style="margin-bottom: 2ex; border: 1px solid black;"></iframe> Собсно , что в нем нужно изменить?

<img src="http://i73.fastpic.ru/big/2016/0214/5a/ffccaf8212397818c5e596f1efa5305a.jpg" width="auto" height="100%" alt="Bittogether.com - Первый украинский криптовалютный форум ">Выделил изображение заглавное ,которое хочу чтоб подстраивалось под разрешение экрана, без обрезания(адаптивная верстка), пкм-просмотреть код элемента.
при наведении этот код. добавил  width="auto" height="100%"
менял на авто и 100% там и там.
Ничего не меняется, собсно-что не так ?
Как можно изменить?
Либо пропорции изображения не те ,что не меняет,чтоб не искажать.
Разрешение изображения 1990*229.

А в каком .css можно изменить код заглавного изображения?

Цитата: makssun от 18 февраля 2016, 23:07:59А в каком .css можно изменить код заглавного изображения?

ihdex.css Вашей темы

Цитата: Stalker от 18 февраля 2016, 23:29:16ihdex.css Вашей темы

Так, это я понял.
Открыл  этот файл, вот фрагмент кода:
/* No image should have a border when linked. */
a img header

{width: 100%;
height: auto;
border: 0;
},менял на width:100%; , все изображения на сайте "плывут", растягиваются на всю ширину.
При значении авто, ничего не меняется.
Что я не правильно делаю?
"Заглавное изображение" - я правильно называю?
Его и только его хочу сделать адаптивным, при изменении разрешения экрана чтоб подстраивалось.

Главного изображения это то изображение что в хейдере?Выше же вроде как писали о нём.

Цитата: Stalker от 19 февраля 2016, 20:00:23Главного изображения это то изображение что в хейдере?Выше же вроде как писали о нём.

Да, http://bittogether.com вот еще раз ссылка.
Это изображение вверху хочу сделать адаптивным.
Как?

Попробуйте width: device-width;

Цитата: Stalker от 19 февраля 2016, 20:45:06Попробуйте width: device-width;

Не помогло. Вот такая вставка помогла:
#top_section h1.forumtitle img{width:100%;}

Это 1455 строка.
На других темах поэксперементирую.

Возможно, это банально, но если вы хотите сделать хедер или заглавное изображение адаптивным, т.е. меняющимся в зависимости от разрешения экрана, то вам надо открыть
файл в теме оформления index.css и в нем найти примерно 1455 строку в дефолтной теме или близко к этому в другой.
Вот кусок кода:


/* clearing the floats */
#top_section
{
    min-height: 65px;
    overflow: hidden;
    margin-bottom: 3px;
}
#top_section h1.forumtitle img{width:100%;}
#upper_section
{
    overflow: hidden;
}
вставляем в нужном месте строку #top_section h1.forumtitle img{width:100%;}  и вуаля- изображение становится адаптивным.