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

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

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

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

код:

HTML5

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

CSS:

CSS

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

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

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

@ZiroyAX 0 / 0 / 2 Регистрация: 04.07.2014 Сообщений: 99
	19.02.2016, 19:43 [ТС]	3
	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	4
	Код давайте, ванговать сегодня не получается ))). А вообще зачем такие разрешения? Я обычно 1600х800 использую. 0

@ZiroyAX 0 / 0 / 2 Регистрация: 04.07.2014 Сообщений: 99
	20.02.2016, 11:33 [ТС]	5
	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	6
	Вы хотите добиться чтобы изображение фона при разрешении 1920х1080 было точно таким же на разрешении 800х1023? 0

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

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

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

Решение