Автоподстройка двух картинок под размер окна в шапке

@Noffery · Регистрация: 18.03.2016

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

Всем привет, у меня на сайте в шапке установлено две картинки, которые переливаются.
Для этого я использовал стиль.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.image-block {
   display: inline-block;
   padding: 0;
   margin: 0;
   background-position: center center;
   background-repeat: no-repeat;
}
 
.image-up, .image-down {
   border: 0;
   margin: 0;
   padding: 0;
}
 
.image-up {
   opacity: 1.0;
   filter: alpha(opacity=99); /* IE */
   display: block;
   position: absolute;
   z-index: 100;
   transition-duration: 0.96s;
   -webkit-transition-duration: 0.96s;
   -moz-transition-duration: 0.96s;
   -o-transition-duration: 0.96s;
   -ms-transition-duration:  0.96s; /* IE9+ */
}
 
.image-up:hover {
   opacity: 0.00;
   filter: alpha(opacity=00); /* IE */
}

Вот сам код в шапке:

HTML5
1
2
3
4
<div class="image-block">
   <img class="image-up" src="http://noffery.ru/wp-content/uploads/2016/03/1_1.png"   />
   <img class="image-down" src="http://noffery.ru/wp-content/uploads/2016/03/1_2.png"   />
</div>

Проблема в том, что при уменьшении окна, картинки остаются на месте. Я пробовал добавить параметр ширина 100%, но тогда при полном развертывании окна картинка съезжает. Но почему то, в маленьком окне, всё ок.

Подскажите, как сделать чтобы при маленьком окне картинки уменьшались пропорционально и одновременно?
(пожалуйста, с кодом, ибо я новичек в этой теме)

@alc0 · 19.03.2016, 04:17

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

Добавлено через 6 минут
Потом: Всякие margin padding равные 0 задаются в начале стилей с помощью * либо просто подрубаете ресетник...блок имеющий абсолютное позиционирование должен иметь 2 позиции откуда ему позиционировать.. И куда вложен этот блок, в другой блок, который должен иметь position, но только relative...

Добавлено через 3 минуты
А уже, что там с картинками, завтра с компа и гляну)

@Noffery · 19.03.2016, 14:52 **[ТС]**

у меня 2 картинки. они переливаются как нужно. зайдите посмотрите с пк.
но, когда окно маленькое, допустим телефон, картинки остаются. ну и выше уже написал я..
как поправить код то?)

@Htext · 19.03.2016, 19:50

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

как поправить код

Для адаптивной верстки?
Вместо

HTML5
1
2
3
4
<div class="image-block">
<img class="image-up" src="http://noffery.ru/wp-content/uploads/2016/03/1_1.png" />
<img class="image-down" src="http://noffery.ru/wp-content/uploads/2016/03/1_2.png" />
</div>

Попробуйте

HTML5
1
2
3
4
<div style="">
<div style="display: inline-block; width:49%"><img class="" src="http://noffery.ru/wp-content/uploads/2016/03/1_1.png" /></div>
<div style="display: inline-block; width:49%"><img class="" src="http://noffery.ru/wp-content/uploads/2016/03/1_2.png" /></div>
</div>

Ну, или, как вариант, можно через таблицы верстать (лучший способ), т.е. display:table и display:table-cell.

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

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

display: block;

Это в любом случае - не нужно.

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

position: absolute;

Это тоже не нужно.

@Noffery · 19.03.2016, 19:55 **[ТС]**

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

@alc0 · 19.03.2016, 19:56

Если хотите, то не заморачиваться с кодом..ваше же дело...но на счет ширины, все работает..чему именно вы ставите ширину, непонятно..смотрите на скрине..все нормально, как по вашему желанию

@Noffery · 19.03.2016, 20:02 **[ТС]**

Значит я сделал что-то не верно, я заменил свой код на ваш.. картинки разъехались..
вот: del

Добавлено через 2 минуты
а если ставить ширину 100%, то всё ок на маленьком экране только. На большом, почему-то, всё плохо..

Комментарий модератора

изображения нужно загружать на форум

@alc0 · 19.03.2016, 20:05

просто необходимо еще поставить блокам, внутри которых лежат картинкиб тоже ширину 100%...но будет один минус...разрешения картинок меньше, чем необходимо, для лучше качества изображения...поэтому на больших разрешениях..качество картинки будет ухудшаться

Добавлено через 1 минуту
ну чтобы исправить это...необходимо их поместить в общий блок с контентом, с такими же параметрами, как у контента

@Noffery · 19.03.2016, 20:13 **[ТС]**

но пока, вот что происходит если поставить параметр ширина 100% del
но на маленьком экране, всё ок.. del

как это исправить? добавить что-то к style widht 100%
или эти блоки вы говорите.. что с ними сделать

как таблицы поправить тогда? какой параметр заменить..

Комментарий модератора

изображения нужно загружать на форум

@alc0 · 19.03.2016, 20:15

Смотрите, что я прописал для блоков, вы должны сделать тоже самое...и будет вам счастье

@alc0 · 19.03.2016, 20:19

смотрите на каждый блок, я что-то писал, первому: margin:0 auto; max-width:1040px;
второму можно ничего не писать; а картинкам:width:100%; max-width:1040px;...все остальное, просто закомментировано и ненужно

@Noffery · 19.03.2016, 20:31 **[ТС]**

немного запутался) вот что переписываю сейчас..

Кликните здесь для просмотра всего текста

<div style="
/* width: 100%; */
max-width: 1040px;
margin: 0 auto;

<div class="image-block"> style="
width: 100%;
max-width: 1040px; */
<img class="image-up" src="http://noffery.ru/wp-content/uploads/2016/03/1_1.png" />
<img class="image-down" src="http://noffery.ru/wp-content/uploads/2016/03/1_2.png" />
</div>
</div>

Добавлено через 6 минут
Ура!! Спасибо большое. Всё работает. Вот что вышло в итоге.

HTML5
1
2
3
4
5
6
7
8
9
<div style="
max-width:1040px;
margin:0 auto;

<div class="image-block"> 
<img class="image-up" src="http://noffery.ru/wp-content/uploads/2016/03/1_1.png" style="width:100%; max-width:1040px;" />
<img class="image-down" src="http://noffery.ru/wp-content/uploads/2016/03/1_2.png" style=" width:100%; max-width:1040px;" />
</div>
</div>

@alc0 · 19.03.2016, 20:32

НЕ за что) ну только не пишите стиль в html..дурацкая привычка...используйте лучше css..и там блоком задайте параметры..

Добавлено через 29 секунд
ну это так, для сведения) можете пока не исправлять, если не хотите

@Noffery · 19.03.2016, 20:33 **[ТС]**

да я еще не научился сам писать.. по шаблончикам, по подсказкам)
неделю вот в вордпрессе сижу)

@Noffery · 27.03.2016, 22:35 **[ТС]**

Кстати, ребят, если окно уменьшается, то радио применяет свойства картинки =)
Каким образом? Это же вообще отдельный плагин

тут http://noffery.ru/
Или оставить так?

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	19.03.2016, 04:17
	Какие должны быть там переливания, не понял) и откажитесь от текста, которая представляет собой картинку...используйте какие-нибудь красивые шрифты, их много в инете, и просто пишите текстом..поверьте так лучше) причем вид этого текста так себе.. И что у вас за проблема с картинкой на фоне??? На мобиле с ней беда) Добавлено через 6 минут Потом: Всякие margin padding равные 0 задаются в начале стилей с помощью * либо просто подрубаете ресетник...блок имеющий абсолютное позиционирование должен иметь 2 позиции откуда ему позиционировать.. И куда вложен этот блок, в другой блок, который должен иметь position, но только relative... Добавлено через 3 минуты А уже, что там с картинками, завтра с компа и гляну) 0

@Noffery 0 / 0 / 0 Регистрация: 18.03.2016 Сообщений: 10
	19.03.2016, 14:52 [ТС]
	у меня 2 картинки. они переливаются как нужно. зайдите посмотрите с пк. но, когда окно маленькое, допустим телефон, картинки остаются. ну и выше уже написал я.. как поправить код то?) 0

@Noffery 0 / 0 / 0 Регистрация: 18.03.2016 Сообщений: 10
	19.03.2016, 19:55 [ТС]
	я попробовал первый способ, и картинки просто расклеились по разным сторонам.. при наведении указателя уже ничего не менялось) видимо свойство стиля потерялось 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	19.03.2016, 19:56
	Если хотите, то не заморачиваться с кодом..ваше же дело...но на счет ширины, все работает..чему именно вы ставите ширину, непонятно..смотрите на скрине..все нормально, как по вашему желанию Миниатюры 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	19.03.2016, 20:05
	просто необходимо еще поставить блокам, внутри которых лежат картинкиб тоже ширину 100%...но будет один минус...разрешения картинок меньше, чем необходимо, для лучше качества изображения...поэтому на больших разрешениях..качество картинки будет ухудшаться Добавлено через 1 минуту ну чтобы исправить это...необходимо их поместить в общий блок с контентом, с такими же параметрами, как у контента 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	19.03.2016, 20:15
	Смотрите, что я прописал для блоков, вы должны сделать тоже самое...и будет вам счастье Миниатюры 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	19.03.2016, 20:19
	Сообщение было отмечено Noffery как решение Решение смотрите на каждый блок, я что-то писал, первому: margin:0 auto; max-width:1040px; второму можно ничего не писать; а картинкам:width:100%; max-width:1040px;...все остальное, просто закомментировано и ненужно 1

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	19.03.2016, 20:32
	НЕ за что) ну только не пишите стиль в html..дурацкая привычка...используйте лучше css..и там блоком задайте параметры.. Добавлено через 29 секунд ну это так, для сведения) можете пока не исправлять, если не хотите 0

@Noffery 0 / 0 / 0 Регистрация: 18.03.2016 Сообщений: 10
	19.03.2016, 20:33 [ТС]
	да я еще не научился сам писать.. по шаблончикам, по подсказкам) неделю вот в вордпрессе сижу) 0

@Noffery 0 / 0 / 0 Регистрация: 18.03.2016 Сообщений: 10
	27.03.2016, 22:35 [ТС]
	Кстати, ребят, если окно уменьшается, то радио применяет свойства картинки =) Каким образом? Это же вообще отдельный плагин тут http://noffery.ru/ Или оставить так? 0

Автоподстройка двух картинок под размер окна в шапке

Решение