Фон блока

@DRANOC · Регистрация: 21.07.2017

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

Разместил на страница 3 блока с картинками на фоне в 1 блоке(container111) все нормально, в остальных фоновые картинки не растягиваются на весь блок, как это исправить?

HTML5
1
2
3
4
5
6
<div class="container111">
</div>
<div class="container222">
</div>
<div class="container333">
</div>

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
.container111{
   position:absolute;
   width:50%;
   height:100%;
    background: url(images/3-1.png);
   background-size:cover;
   
   }
   .container222{
   position:absolute;
   width:50%;
   height:50%;
   right:0;
   background: url(images/3-2.png);
   background-size:cover;
   }
   .container333{
   position:absolute;
   width:50%;
   height:50%;
   right:0;
   bottom:0;
   background: url(images/3-3.png);
   background-size:cover;
   }

@6elka1703 · 08.08.2018, 13:42

DRANOC, вроде расстягивается

@gogolik · 08.08.2018, 14:01

6elka1703, нет. Изображения не заполняют фон блока, а режутся.

DRANOC, мне кажется, что это из-за процентовок в размерах и абсолютного позиционирования. Попробуйте переделать структуру.

@6elka1703 · 08.08.2018, 14:05

gogolik, ну тогда пускай делают без абсолютного позиционирования, тут и без него можно спокойно обойтись

@DRANOC · 08.08.2018, 14:22 **[ТС]**

меняю позиционирование изображение все ровно не растягивается(

@6elka1703 · 08.08.2018, 14:25

DRANOC, код

@DRANOC · 08.08.2018, 14:39 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="page__wrap">
    <div class="container11">
     <div class="container111">
     
    
</div>
<div class="container222">
     
    
</div>
<div class="container333">
     
    
</div>
    
</div>

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
34
35
.page__wrap {
    min-height: 100%;
    position: relative;
    max-width: 100%;
}
.container11 {
    position: absolute;
    width: 70%;
    height: 100%;
}
.container111{
   position:absolute;
   width:50%;
   height:100%;
    background: url(images/3-1.png);
   background-size:cover;
   
   }
   .container222{
   position:absolute;
   width:50%;
   height:50%;
   right:0;
   background: url(images/3-2.png);
   background-size:cover;
   }
   .container333{
   position:absolute;
   width:50%;
   height:50%;
   right:0;
   bottom:0;
   background: url(images/3-3.png);
   background-size:cover;
   }

Меняю абсолютное позиционирование на другие, картинки того же размера, только сьезжают.

@6elka1703 · 08.08.2018, 15:09

DRANOC, честно без понятия че делать. По идее должно растягиваться но почему нет я не знаю. Остается только картинки под размер блоков сделать.

Добавлено через 4 минуты
DRANOC, Еще вариант это делать картинки не background а делаешь блок в него картинку пихаешь. Блока позиционируешь как тебе надо а картинке внутри блока задай ширину и высоту 100% и все

@DRANOC · 08.08.2018, 15:28 **[ТС]**

Если картинки под размер блоков то тогда они ведь не будут адаптивными? а я картинки вставлял в блок не как фон, задаю размер width:100% height 100% но они все ровно не растягиваются под блок, а кажется берут процент от размера картинки

@6elka1703 · 08.08.2018, 15:39

DRANOC, ну так подгони процентами размер картинки под блок

Добавлено через 6 минут
DRANOC, даже если ты подгонишь размер изображения под блок в css ставишь картинки

CSS
1
2
max-width:100%;
height: auto;

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

@6elka1703 · 08.08.2018, 16:00

DRANOC, у меня так получилось. Короче ставишь background-image и все картинка растянется максимум насколько это возможно по размерам блока. Если картинка меньше блока то качество фигня будет. Чтоб понимал что картинка растягивается по размерам блока(размер у картинки 6000х4000)

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	08.08.2018, 13:42
	DRANOC, вроде расстягивается Миниатюры 0

@gogolik Супер-модератор 3953 / 2064 / 829 Регистрация: 13.03.2010 Сообщений: 6,786
	08.08.2018, 14:01
	6elka1703, нет. Изображения не заполняют фон блока, а режутся. DRANOC, мне кажется, что это из-за процентовок в размерах и абсолютного позиционирования. Попробуйте переделать структуру. 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	08.08.2018, 14:05
	gogolik, ну тогда пускай делают без абсолютного позиционирования, тут и без него можно спокойно обойтись 0

@DRANOC 0 / 0 / 0 Регистрация: 21.07.2017 Сообщений: 74
	08.08.2018, 14:22 [ТС]
	меняю позиционирование изображение все ровно не растягивается( 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	08.08.2018, 14:25
	DRANOC, код 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	08.08.2018, 15:09
	DRANOC, честно без понятия че делать. По идее должно растягиваться но почему нет я не знаю. Остается только картинки под размер блоков сделать. Добавлено через 4 минуты DRANOC, Еще вариант это делать картинки не background а делаешь блок в него картинку пихаешь. Блока позиционируешь как тебе надо а картинке внутри блока задай ширину и высоту 100% и все 0

@DRANOC 0 / 0 / 0 Регистрация: 21.07.2017 Сообщений: 74
	08.08.2018, 15:28 [ТС]
	Если картинки под размер блоков то тогда они ведь не будут адаптивными? а я картинки вставлял в блок не как фон, задаю размер width:100% height 100% но они все ровно не растягиваются под блок, а кажется берут процент от размера картинки 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	08.08.2018, 16:00
	Сообщение было отмечено DRANOC как решение Решение DRANOC, у меня так получилось. Короче ставишь background-image и все картинка растянется максимум насколько это возможно по размерам блока. Если картинка меньше блока то качество фигня будет. Чтоб понимал что картинка растягивается по размерам блока(размер у картинки 6000х4000) Миниатюры 1

Фон блока

Решение