Изменение размера фонового изображения

@ZiroyAX · Регистрация: 04.07.2014

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

При размере окна 1920 пикселей все хорошо, но как только уменьшаю окно до 1024 пикселей, появляется пустое место, предполагаю из-за тега height, но если его не ставить, то фона вообще не будет, как мне лучше сделать, подскажите, пожалуйста)

код:

HTML5
1
2
3
4
<body>
<div class="fon1"><p>Экшн камера - великое изобретение человечества </p></div>
<div class="fon2"><p>Экшн камера - великое изобретение человечества </p></div>
</body>

CSS:

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
32
33
body{
    min-width: 1024px;
    max-width: 1920px;
}
 
.fon1{
    background-image:url(images/1.jpg);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 100%;
    height: 1024px;
    }
    
.fon1 p{
    float:right;
    font-size: 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-style:italic;
}
 
.fon2{
    background-image:url(images/2.jpg);
    background-size: 100%;
    width: 100%;
    height: 1024px;
    }
    
.fon2 p{
    float:right;
    font-size: 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-style:italic;
}

@Kirilbl4 · 19.02.2016, 13:13

background-size: cover;
Вам поможет.

@ZiroyAX · 19.02.2016, 19:43 **[ТС]**

Kirilbl4, Спасибо большое) Появился нюанс, расскажу на своем примере:

картинка 850х567 идеально работает, как мне надо, т.е. масштабируется максимум до 1920px и уменьшается до 1024px.
А вот картинка 1920х1080 стоит ровно как и положено максимум до 1920px, но размер уменьшается на сотню пикселей, ну никак не до 1024рх в ширину.
А картинка 2400х1220 вообще никак не масштабируется(( точнее не хочет уменьшатся до заданных моих максимальных и минимальных значений ширины контейнера div

Можете объяснить почему так происходит?)

@Kirilbl4 · 20.02.2016, 09:04

Код давайте, ванговать сегодня не получается ))). А вообще зачем такие разрешения? Я обычно 1600х800 использую.

@ZiroyAX · 20.02.2016, 11:33 **[ТС]**

Kirilbl4, На данный момент весь код, который у меня есть, я вставил в начале темы)

А на счет разрешения, я просто нашел понравившиеся мне картинки.

Цель, скажем, у меня создать сайт под разные мониторы с помощью медиа-запросов:
1) от 1024рх до 1920рх
2) Возможен вариант от 800рх до 1023рх, но точно не уверен.
3) Для планшетов, точно не помню сейчас, но грубо говоря ширина от 481рх до 799рх.
4) И для смарфонов до 480рх

@Kirilbl4 · 20.02.2016, 12:21

Вы хотите добиться чтобы изображение фона при разрешении 1920х1080 было точно таким же на разрешении 800х1023?

@ZiroyAX · 20.02.2016, 15:31 **[ТС]**

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

Например, у меня картинка 1280х1024. При ширине экрана монитора в 1920рх, то эта картинка увеличилась до 1920рх и неважно, что в ней будут некоторые искажения из-за масштаба.

А если ширина экрана 1024рх и ниже, то эта самая же картинка уменьшалась пропорционально до нужной ширины экрана.

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

@Kirilbl4 · 25.02.2016, 12:55

Тут я уже не смогу помочь, т.к. сам не знаю можно ли такое сделать. А вот по поводу разных картинок, это, да, пофотошопите картинку под нужные размеры, а потом через медиа подключите все к разным дисплеям. Это, конечно же отразится на времени загрузки сайта, но думаю несильно.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Kirilbl4 1 / 1 / 3 Регистрация: 10.02.2016 Сообщений: 30
	19.02.2016, 13:13
	Сообщение было отмечено whiteapps как решение Решение background-size: cover; Вам поможет. 0

@ZiroyAX 0 / 0 / 2 Регистрация: 04.07.2014 Сообщений: 99
	19.02.2016, 19:43 [ТС]
	Kirilbl4, Спасибо большое) Появился нюанс, расскажу на своем примере: картинка 850х567 идеально работает, как мне надо, т.е. масштабируется максимум до 1920px и уменьшается до 1024px. А вот картинка 1920х1080 стоит ровно как и положено максимум до 1920px, но размер уменьшается на сотню пикселей, ну никак не до 1024рх в ширину. А картинка 2400х1220 вообще никак не масштабируется(( точнее не хочет уменьшатся до заданных моих максимальных и минимальных значений ширины контейнера div Можете объяснить почему так происходит?) 0

@Kirilbl4 1 / 1 / 3 Регистрация: 10.02.2016 Сообщений: 30
	20.02.2016, 09:04
	Код давайте, ванговать сегодня не получается ))). А вообще зачем такие разрешения? Я обычно 1600х800 использую. 0

@ZiroyAX 0 / 0 / 2 Регистрация: 04.07.2014 Сообщений: 99
	20.02.2016, 11:33 [ТС]
	Kirilbl4, На данный момент весь код, который у меня есть, я вставил в начале темы) А на счет разрешения, я просто нашел понравившиеся мне картинки. Цель, скажем, у меня создать сайт под разные мониторы с помощью медиа-запросов: 1) от 1024рх до 1920рх 2) Возможен вариант от 800рх до 1023рх, но точно не уверен. 3) Для планшетов, точно не помню сейчас, но грубо говоря ширина от 481рх до 799рх. 4) И для смарфонов до 480рх 0

@Kirilbl4 1 / 1 / 3 Регистрация: 10.02.2016 Сообщений: 30
	20.02.2016, 12:21
	Вы хотите добиться чтобы изображение фона при разрешении 1920х1080 было точно таким же на разрешении 800х1023? 0

@ZiroyAX 0 / 0 / 2 Регистрация: 04.07.2014 Сообщений: 99
	20.02.2016, 15:31 [ТС]
	Kirilbl4, Да, ну только чтобы эта картинка, желательно, уменьшалась в размере с сохранением пропорций. Например, у меня картинка 1280х1024. При ширине экрана монитора в 1920рх, то эта картинка увеличилась до 1920рх и неважно, что в ней будут некоторые искажения из-за масштаба. А если ширина экрана 1024рх и ниже, то эта самая же картинка уменьшалась пропорционально до нужной ширины экрана. Или же лучше под каждую ширину экрана монитора искать точно такую же картинку с разными размерами? Но тогда это увеличит объем памяти самого сайта, и предполагаю, увеличит загрузку самой веб-странички? 0

@Kirilbl4 1 / 1 / 3 Регистрация: 10.02.2016 Сообщений: 30
	25.02.2016, 12:55
	Тут я уже не смогу помочь, т.к. сам не знаю можно ли такое сделать. А вот по поводу разных картинок, это, да, пофотошопите картинку под нужные размеры, а потом через медиа подключите все к разным дисплеям. Это, конечно же отразится на времени загрузки сайта, но думаю несильно. 0

Изменение размера фонового изображения

Решение