Синхронное изменение размера фона под окно браузера

@Maks-X · Регистрация: 21.08.2016

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

Всем привет. Ребята, я не совсем силён в программировании и создании сайта. Но однако при его создании у меня появилась проблема. Когда браузер раскрыт на полную, то картинка выглядит вполне нормально, но если начать окно браузера уменьшать, то картинка начинает деформироваться, сужаться некрасиво. Хочется, чтобы картинка синхронно уменьшалась с окном браузера или увеличивалась, не деформировалась как пружина. Приведу в пример произвольные картинки, как это происходит. Нужен код CSS. Помогите...

Картинка 1 - это нормальный вариант первоначальный
Картинка 2 - это если уменьшить размер окна браузера, в особенности по ширине.

@Kenworth · 22.08.2016, 00:09

тегу img задай "width:100%; height: auto", а обертке картинки нужный размер width и height

@Maks-X · 22.08.2016, 00:17 **[ТС]**

А можешь написать это полностью кодом?

Добавлено через 2 минуты
У меня в плане фона прописано вот так :

CSS
1
2
3
4
5
6
7
8
9
10
body {
background-color: #000;
background-image: url ("ссылка на картинку");
background:url() top 0% no-repeat;
background-size:100% 108% ;
webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover; 
background-repeat: space
}

@Kenworth · 22.08.2016, 00:28

это изображение контента или элемента страницы (header, footer или еще чего нибудь)

@Maks-X · 22.08.2016, 00:31 **[ТС]**

Извини, но не совсем понял твой ответ...

@Fedor92 · 22.08.2016, 00:33

CSS
1
2
3
4
5
6
7
body{
   width: 100%;
   height: 100%; 
   margin: 0; 
   background:url(images/picture.png) no-repeat center center; 
   background-size:cover
}

@Kenworth · 22.08.2016, 00:36

К чему относиться данная картинка??
Если это элемент контента, который будет меняться - то туб background не пойдет
Если это элемент шапки или background-секции, то достаточно вот таких свойств:

CSS
1
2
    background: url("ссылка на картинку") no-repeat center center;
    background-size: cover;

@mrtoxas · 22.08.2016, 00:51

Background можно еще дальше сократить:

CSS
1
background:url(images/picture.png) no-repeat 50%/cover;

@Maks-X · 22.08.2016, 22:25 **[ТС]**

Спасибо большое, ребят!Помогло!! Только возникла проблема, когда фон с окном браузера уменьшается, то начинает размножаться,типа как кадрироваться, как это предотвратить,? И я просто еще открывал некоторые сайты, начинал уменьшать окно браузера и фон синхронно уменьшался до примерно 550х880 px , а у меня уменьшается до 1100x880 px , как сделать? Просто я так понимаю это играет роль при просмотре сайта на разных разрешениях экрана.

@Fedor92 · 22.08.2016, 22:40

Maks-X, выкиньте в Интернет страничку с примером или выложите сюда архивом исходник с Вашей страницей и фоном, чтобы можно было погонять...

@Maks-X · 22.08.2016, 22:49 **[ТС]**

Вот так это происходит. В подвале виднеется уже второй кадр фона повторяющийся.

Fedor92, а прописал я код, который ты написал по началу, все стало синхронно отлично но появилась вот эта проблема.

@Fedor92 · 23.08.2016, 00:05

Сообщение от Maks-X

Вот так это происходит. В подвале виднеется уже второй кадр фона повторяющийся.

CSS
1
2
3
body{
    min-height:100%
}

@Maks-X · 09.09.2016, 00:04 **[ТС]**

Спасибо, с этим вроде бы разобрался. Некоторые время не занимался сайтом, теперь возвращаюсь. Это у меня сайт знакомств по партнерке, просто сам дизайн хочу сделать свое все. Использую css. Проблема у меня образовалась еще в том, что на разных разрешениях экрана, сайт по разному отображается, если поставить 800 на 600, то получается вот так,что картинка будто бы не растягивается на весь экран, а снизу и сбоку какие то пространства и подвал видно, и меню регистрации съезжает. Как сделать, чтобы на всех разрешениях экрана сайт смотрелся нормально? Ребята, помогите пожалуйста... сайт пока в тестовом варианте, как черновик, вот ссылка : http://www.ловалова.рф Буду очень признателен за помощь, а то я измучился уже. И еще хочется чтобы на разных страницах сайта был свой фон, а у меня получается , если войти на сайт, то фон такой же как и на главной, смотрится не очень...

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Maks-X 0 / 0 / 0 Регистрация: 21.08.2016 Сообщений: 13

	Синхронное изменение размера фона под окно браузера 21.08.2016, 23:59. Показов 8473. Ответов 12 Метки нет (Все метки) Всем привет. Ребята, я не совсем силён в программировании и создании сайта. Но однако при его создании у меня появилась проблема. Когда браузер раскрыт на полную, то картинка выглядит вполне нормально, но если начать окно браузера уменьшать, то картинка начинает деформироваться, сужаться некрасиво. Хочется, чтобы картинка синхронно уменьшалась с окном браузера или увеличивалась, не деформировалась как пружина. Приведу в пример произвольные картинки, как это происходит. Нужен код CSS. Помогите... Картинка 1 - это нормальный вариант первоначальный Картинка 2 - это если уменьшить размер окна браузера, в особенности по ширине. Миниатюры 0

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	22.08.2016, 00:09
	тегу img задай "width:100%; height: auto", а обертке картинки нужный размер width и height 0

@Kenworth 105 / 104 / 59 Регистрация: 21.10.2013 Сообщений: 346
	22.08.2016, 00:28
	это изображение контента или элемента страницы (header, footer или еще чего нибудь) 0

@Maks-X 0 / 0 / 0 Регистрация: 21.08.2016 Сообщений: 13
	22.08.2016, 00:31 [ТС]
	Извини, но не совсем понял твой ответ... 0

@Maks-X 0 / 0 / 0 Регистрация: 21.08.2016 Сообщений: 13
	22.08.2016, 22:25 [ТС]
	Спасибо большое, ребят!Помогло!! Только возникла проблема, когда фон с окном браузера уменьшается, то начинает размножаться,типа как кадрироваться, как это предотвратить,? И я просто еще открывал некоторые сайты, начинал уменьшать окно браузера и фон синхронно уменьшался до примерно 550х880 px , а у меня уменьшается до 1100x880 px , как сделать? Просто я так понимаю это играет роль при просмотре сайта на разных разрешениях экрана. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	22.08.2016, 22:40
	Maks-X, выкиньте в Интернет страничку с примером или выложите сюда архивом исходник с Вашей страницей и фоном, чтобы можно было погонять... 0

@Maks-X 0 / 0 / 0 Регистрация: 21.08.2016 Сообщений: 13
	22.08.2016, 22:49 [ТС]
	Вот так это происходит. В подвале виднеется уже второй кадр фона повторяющийся. Fedor92, а прописал я код, который ты написал по началу, все стало синхронно отлично но появилась вот эта проблема. Миниатюры 0

@Maks-X 0 / 0 / 0 Регистрация: 21.08.2016 Сообщений: 13
	09.09.2016, 00:04 [ТС]
	Спасибо, с этим вроде бы разобрался. Некоторые время не занимался сайтом, теперь возвращаюсь. Это у меня сайт знакомств по партнерке, просто сам дизайн хочу сделать свое все. Использую css. Проблема у меня образовалась еще в том, что на разных разрешениях экрана, сайт по разному отображается, если поставить 800 на 600, то получается вот так,что картинка будто бы не растягивается на весь экран, а снизу и сбоку какие то пространства и подвал видно, и меню регистрации съезжает. Как сделать, чтобы на всех разрешениях экрана сайт смотрелся нормально? Ребята, помогите пожалуйста... сайт пока в тестовом варианте, как черновик, вот ссылка : http://www.ловалова.рф Буду очень признателен за помощь, а то я измучился уже. И еще хочется чтобы на разных страницах сайта был свой фон, а у меня получается , если войти на сайт, то фон такой же как и на главной, смотрится не очень... Миниатюры 0

Синхронное изменение размера фона под окно браузера

Решение