Как масштабировать заглавное изображение?

Автор makssun, 14 февраля 2016, 22:08:43

« назад - далее »

0 Пользователи и 1 гость просматривают эту тему.

makssun

Вот, на хостинг благополучно переехал, домен прикрутил, новая напасть возникла.
Вверху форума есть изображение с надписью на всю ширину. Его в теме оформления добавил.
Его размеры 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% ?

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

Yworld_garry

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

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

makssun

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

iaroslav

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

makssun

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

iaroslav

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

makssun


iaroslav

Убрать
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%;
}

makssun

Я так понял нужно открыть файл темы оформления 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> Собсно , что в нем нужно изменить?

makssun

<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.

makssun

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

Yarik

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

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

makssun

Цитата: 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%; , все изображения на сайте "плывут", растягиваются на всю ширину.
При значении авто, ничего не меняется.
Что я не правильно делаю?
"Заглавное изображение" - я правильно называю?
Его и только его хочу сделать адаптивным, при изменении разрешения экрана чтоб подстраивалось.

Yarik

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

makssun

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

Yarik


makssun

Цитата: Stalker от 19 февраля 2016, 20:45:06Попробуйте width: device-width;
Не помогло. Вот такая вставка помогла:
#top_section h1.forumtitle img{width:100%;}

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

makssun

Возможно, это банально, но если вы хотите сделать хедер или заглавное изображение адаптивным, т.е. меняющимся в зависимости от разрешения экрана, то вам надо открыть
файл в теме оформления 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%;}  и вуаля- изображение становится адаптивным.