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

@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/
Или оставить так?

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@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

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

Решение