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

@maxsun · Регистрация: 17.02.2016

Студворк — интернет-сервис помощи студентам

Вверху форума есть изображение с надписью на всю ширину. Его в теме оформления добавил.
Его размеры 1990*229. У меня монитор 1920*1080, соотв. оно не обрезается справа.
Зашел на форум под монитором 1280*1024, обрезано справа.
Выделил изображение заглавное ,которое хочу чтоб подстраивалось под разрешение экрана, без обрезания(адаптивная верстка), пкм-просмотреть код элемента.
при наведении этот код. добавил width="auto" height="100%"
менял на авто и 100% там и там.
Ничего не меняется, собсно-что не так ?
Как можно изменить?
Либо пропорции изображения не те ,что не меняет,чтоб не искажать.

HTML5
1
<img src="http://i73.***********/big/2016/0214/5a/ffccaf8212397818c5e596f1efa5305a.jpg" width="auto" height="100%" alt="Bittogether.com - Первый украинский криптовалютный форум ">

@paull · 17.02.2016, 20:56

Для изображения style="width: 100%;" должно помочь!

@maxsun · 17.02.2016, 21:35 **[ТС]**

а его вписывать передь кодом что я привел?
или в каком месте?

Добавлено через 36 минут
вписал этот код

HTML5
1
style="width: 100%"

заместо своего

HTML5
1
width="auto" height="100%"

в браузере в средстве разработки все меняется как надо.
а вот на реальном монике 1280х1024 ничего не меняется, изображение адаптивно не изменяется, обрезается.
Что не так?
Где-то еще надо прописывать, менять?

@paull · 18.02.2016, 01:22

Весь код покажи!

@maxsun · 18.02.2016, 08:44 **[ТС]**

А как сохранить изменения? Делаю в опере ,выделяю изображение-ПКМ- просмотреть код элемента, выбираю нужный кусок кода, ПКМ -редактирование, вставляю. И все .
Нигде нет кнопки сохранить.
Сейчас зашел, не сохранено, по новой вставил код.

@Cdelphi78 · 18.02.2016, 22:22

maxsun, Вам нужно править css файл. Путь до него можно посмотреть в браузере.

@maxsun · 18.02.2016, 23:09 **[ТС]**

Как до него просмотреть путь? У меня несколько файлов таких, не могу в них искомый код найти.

@Cdelphi78 · 18.02.2016, 23:18

Ссылку можете дать на сайт?

@maxsun · 19.02.2016, 08:01 **[ТС]**

Сообщение от Cdelphi78

Ссылку можете дать на сайт?

http://bittogether.com/

@Cdelphi78 · 19.02.2016, 09:15

Пропишите width:100%; вот в этот файл http://bittogether.com/Themes/... /index.css вот сюда

CSS
1
2
3
4
a img {
    border: 0;
    
}

Можно открыть файл и поискать поиском или перейти на 175 строку.

@maxsun · 19.02.2016, 18:40 **[ТС]**

HTML5
1
2
3
4
a img 
 
{width:auto;
    border: 0;

вот так вставил,менял на width:100%; , все изображения на сайте "плывут", растягиваются на всю ширину.
При значении авто, ничего не меняется.
Так есть какой способ победить?

@Htext · 19.02.2016, 21:35

Сообщение от maxsun

все изображения на сайте "плывут"

Так не надо было делать это в файле index.css (вероятно, Вы задали это свойтсво для какого-нибудь класса, который применяется ко всем изображениям).
Потом, я не обнаружил мета-тега
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

@maxsun · 19.02.2016, 22:11 **[ТС]**

Так а в каком файле нужно править?
Какой тег применить для заглавного изображения? И в каком месте его вставлять?

@Cdelphi78 · 20.02.2016, 09:03

maxsun, зачем же вы испортили то что я написал.Вот так вот нужно было

CSS
1
2
3
4
a img {
    border: 0;
    width:100%;
}

Добавлено через 3 минуты

Сообщение от maxsun

вот так вставил,менял на width:100%; , все изображения на сайте "плывут", растягиваются на всю ширину.

Тогда попробуйте задать класс и прописать ему width:100%
Например:

HTML5
1
<img class="responsi-img" src="http://i73.***********/big/2016/0214/5a/ffccaf8212397818c5e596f1efa5305a.jpg" width="auto" height="100%" alt="Bittogether.com - Первый украинский криптовалютный форум ">

CSS
1
2
3
.responsi-img {
    width:100%;
}

@maxsun · 20.02.2016, 19:27 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
/* 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%;}
помогло! то что надо! заглавное изображение, или хедер адаптивно меняется в зависимости от разрешения экрана.
остальные способы не помогли.
Все спасибо за поддержку !

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@paull 2 / 1 / 5 Регистрация: 15.02.2016 Сообщений: 21
	17.02.2016, 20:56
	Для изображения style="width: 100%;" должно помочь! 0

@paull 2 / 1 / 5 Регистрация: 15.02.2016 Сообщений: 21
	18.02.2016, 01:22
	Весь код покажи! 0

@maxsun 0 / 0 / 0 Регистрация: 17.02.2016 Сообщений: 19
	18.02.2016, 08:44 [ТС]
	А как сохранить изменения? Делаю в опере ,выделяю изображение-ПКМ- просмотреть код элемента, выбираю нужный кусок кода, ПКМ -редактирование, вставляю. И все . Нигде нет кнопки сохранить. Сейчас зашел, не сохранено, по новой вставил код. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	18.02.2016, 22:22
	maxsun, Вам нужно править css файл. Путь до него можно посмотреть в браузере. 0

@maxsun 0 / 0 / 0 Регистрация: 17.02.2016 Сообщений: 19
	18.02.2016, 23:09 [ТС]
	Как до него просмотреть путь? У меня несколько файлов таких, не могу в них искомый код найти. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	18.02.2016, 23:18
	Ссылку можете дать на сайт? 0

@maxsun 0 / 0 / 0 Регистрация: 17.02.2016 Сообщений: 19
	19.02.2016, 22:11 [ТС]
	Так а в каком файле нужно править? Какой тег применить для заглавного изображения? И в каком месте его вставлять? 0