Почему при уменьшении окна увеличивается высота блока?

Question

[Alex_87]

Здравствуйте! Прошу помочь в следующем вопросе... Не знаю почему при уменьшении окна, увеличивается блок самого изображения. Но это только один вопрос.... Контент в изображении не увеличивает блок, отталкивая его. Контент(текст) проваливается куда-то....
https://codepen.io/Alexei_87/pen/OgqGgV?editors=1100

Answer 1

[Артур Шаров]

Блок не увеличиваеться по высоте это изображение уменьшается согласно css свойству background-size: contain;
Если хотите чтобы изображение заполнило весь блок можете воспользоваться свойством background-size: cover;
Более подробно можете почитать на этой странице htmlbook.ru/css/background-size

Comments

[Alex_87]

Почему все такие не внимательные!? ) Мне не нужен background-size: cover А блок увеличивается, обратите внимание на рамку. Я специально её задал. А также, проблема с контентом(текстом). Он проваливается. Очень прошу, поиграйтесь с размером окна повнимательнее.

[Артур Шаров]

Alex_87: Блок не увеличиваеться по высоте
И с текстом всё в порядке!

[Alex_87]

Артур Шаров: хорошо, ЧТО ЗА ПУСТОЕ ПРОСТРАНСТВО НА ВТОРОЙ СКРИНШОТЕ??? А ЧТОБЫ УВИДЕТЬ ПРОБЛЕМУ С ТЕКСТОМ, НУЖНО УМЕНЬШИТЬ ОКНО! ВЫ МОЖЕТЕ ЕГО УМЕНЬШИТЬ ИЛИ НЕТ!? Я ЖЕ ОБ ЭТОМ УЖЕ ПИСАЛ!!!
Я специально сделал ещё один блок, чтобы наконец-то вы увидели проблему!
https://codepen.io/Alexei_87/pen/OgqGgV?editors=1100

[Ankhena]

Alex_87: да сколько можно?? Вы дублируете вопрос уже.

Это происходит потому что Вы пишете contain!!!!!! Откройте уже спецификацию и прочитайие отличия contain от cover. Фон занимает ширину, а по высоте пропорционально уменьшается. Но поскольку у блока фиксированная высота, то остается ПУСТОЕ МЕСТО.

[Alex_87]

Ankhena W: Я дублирую вопрос потому что вы на него не отвечаете! Я же чётко обозначил, что мне нужно, чтобы изображение, а теперь внимание, ПРОПОРЦИОНАЛЬНО УМЕНЬШАЛОСЬ ПРИ УМЕНЬШЕНИИ ОКНА) А при COVER, внимание, ОНО ПРОСТО ЗАНИМАЕТ ВСЁ ПРОСТРАНСТВО и НЕ УМЕНЬШАЕТСЯ!!!

[Ankhena]

Alex_87: в третий раз пишу: пропорциональное уменьшение: background-size: 100% 100%

[Alex_87]

Ankhena W: И что мне делать с высотой??? Я же не могу не задавать её. И min-height тоже не срабатывает! Что делать?

[Ankhena]

Alex_87: Откройте, пожалуйста, https://jsfiddle.net/xj2kyduf/
Подвигайте ширину окна с результатом, посмотрите как работают 3 варианта указания размера фона.

И что мне делать с высотой??? Я же не могу не задавать её. И min-height тоже не срабатывает!

Я в своем ответе показывала пример где стоит минимальная высота, чем он не устраивает?
Ну кроме того, что Вы хотите в нем переставить background-size на 100% 100%

[Alex_87]

Ankhena W: хочу, чтобы было как здесь: smartgrid.dmitrylavrik.ru
Посмотрите, как пропорционально уменьшается видео блок

[Ankhena]

Alex_87: Ну так откройте DevTools и посмотрите

[Alex_87]

Ankhena W: Прошу помочь в написании кода, исходя из ссылки на смартгрид, поскольку я не могу вытащить всё с DevTools правильно...

[Ankhena]

Alex_87: написала в своем ответе варианты. Не будем пачкать тут и раздражать людей.

[Alex_87]

Ankhena W: А попросил вас нормально, а вы поступили как свинья! Где и кого я здесь пачкал? Вы соображайте, что вы здесь говорите? Вы своё не желание или не умение помочь скрываете вот таким непонятными и грязными словами!? Я чётко обозначил, что нашёл сайт на котором видео сжималось в точь в точь, как я сам хотел попросил вас помочь разобраться с кодом, поскольку мне не удалось с помощью DEVTOOLS сделать нормально, а вы как отреагировали... В следующий раз, думайте, прежде чем что-нибудь написать!

[Ankhena]

Alex_87: Вы в своем уме? Я два дня разжевываю Вам простые вещи, сделала несколько вариантов ответов с примерами кода. Написала их в СВОЕМ ответе к Вашему первому вопросу.
А Вы не удосуживаетесь включить мозг и еще смеете обзываться?

[Alex_87]

Ankhena W: Это вы кажется не в своём уме!!! Я каждый раз вам повторяю в сообщениях, что мне нужно, подчёркивая жирным шрифтом, а вы как попугай, не обращая внимания на мои слова, повторяете одно и тоже! Если бы я не верил в человека, то подумал, что вы просто издеваетесь надо мной. Ещё раз, прочитайте сообщения и вы увидите, сколько раз я повторял слово пропорционально! Вы понимаете значение этого слова? Пропорциональность - это зависимость сторон... при уменьшении ширины, уменьшается высота. Вы предлагаете решения, которые вообще к адаптивке не имеют значения! Вы говорите, что объясняли "простые вещи". Тогда объясните, почему вам, как эксперту не пришло в голову, что блоки с изображением сложно поддаются уменьшению? Что всегда для этих случаев прописывается img в html!!! И это я узнал у человека, который не занимается frontend, а backend-ом. И я видел ваши решения. Спасибо конечно, что помогали, тратили своё время. Но ваш код не решал проблему. И я не раз вам об этом писал! Я честно говоря был в шоке, когда я получал от вас сообщения. Создавалось впечатление, что вы меня вообще не слышите. Я прощу объяснить одно, вы объясняете другое! Но когда вы написали: "Не будем пачкать тут и раздражать людей", то я вообще не понял, к чему вы это? Зачем оскорблять друг друга? Я терпел ваше не понимание,почему вы так не можете? ... Всё, не хочу выяснять далее отношения. Предлагаю перемирие! Кстати, я решил эту задачу. Если будет интересно - напишите. Покажу! .... P.S. background-size: 100% 100% - не отвечает за пропорциональность. При уменьшении окна, он просто тупо сжимает картинку по ширине, оставляя неизменным высоту!