0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 1704 Просмотров
*

kik84

  • Завсегдатай
  • 1350
  • 64 / 4
Для div сделать height: auto;
« : 11.05.2015, 19:46:19 »
Подскажите, как для div-а дать height: auto, чтобы фоновое изображение было адаптивным без лишних телодвижений с @media?
#block_01 {
  width: 90%;
  margin: 0 auto;
  height: auto;
  background: url('../images/team/01.jpg');
  color: #fff;
  position: relative;
}
Работает лишь вариант с height: ...px; но для респонса это совсем не то, что хотелось бы)
Воткнуть изображение через <img src... не могу, т.к. там подключен скрипт и придется уже его менять.
*

darkghost

  • Живу я здесь
  • 2212
  • 97 / 0
Re: Для div сделать height: auto;
« Ответ #1 : 13.05.2015, 17:31:44 »
хорошо бы еще ссылочку на "больного", было бы проще оценить ситуацию. Почему не работает height: auto - может быть несколько причин, которые могут скрываться в родителе
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Для div сделать height: auto;
« Ответ #2 : 13.05.2015, 18:28:33 »
Если нужно, чтобы тянулся сам блок, только:
а) вставлять изображение
б) растягивать скриптом
Если нужно оптимальное заполнение фоновой картинкой, то:
background-size:cover;
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
Re: Для div сделать height: auto;
« Ответ #3 : 19.05.2015, 12:05:48 »
Родительскому div
 
Код
disply:flex
тогда дочерний станет 100% по высоте родителя
Про flex-box http://pepelsbey.net/pres/flexbox-gotcha/#32
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Для div сделать height: auto;
« Ответ #4 : 19.05.2015, 13:06:16 »
flex ещё недостаточно поддерживается, на мой взгляд.
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
Re: Для div сделать height: auto;
« Ответ #5 : 19.05.2015, 13:19:29 »
Поддерживается он уже давно полностью. Просто не у всех последние версии браузеров. Хотя последние и не обязательно, главное не древние.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Для div сделать height: auto;
« Ответ #6 : 19.05.2015, 13:56:23 »
А я как сказал? ^-^ Так то он со дня выхода поддерживается полностью. Просто не у всех что тогда, что сейчас последние версии браузеров. А на некоторых проектах использовать флекс в принципе недопустимо, т.к. многие предприятия сидят на фиксированных старых версиях. Одно дело когда css3-красоты не видно у клиента, другое flex-модель и развалившаяся вёрстка.
Дополню: Свойство поддерживается EI от 11-й (!) версии. Даже в Windows 8 по-умолчанию идёт десятый IE. Т.е. 11-й идёт в десятой винде. Можно загуглить долю 10-й винды на рынке десктопных ОС. Но суть думаю понятна.
« Последнее редактирование: 19.05.2015, 14:00:53 от Shustry »
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
Re: Для div сделать height: auto;
« Ответ #7 : 19.05.2015, 15:48:52 »
Можно еще загуглить долю IE ;). Конечно это дело каждого, как делать. Я предложил вариант, вы предупредили. Дело сделано :). Но Chrome, Opera, Mozilla отображают отлично.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать?

Автор Twins

Ответов: 3
Просмотров: 1473
Последний ответ 01.07.2021, 13:11:51
от xpank
Как сделать кнопку формы аккаунта?

Автор Evgen Kulibin

Ответов: 0
Просмотров: 677
Последний ответ 22.04.2021, 22:15:06
от Evgen Kulibin
Как сделать плавающий модуль?

Автор THeCMeX

Ответов: 2
Просмотров: 771
Последний ответ 08.03.2021, 22:21:01
от Flexderection
[Решено] Как сделать чтобы фотография открылась в отдельном окне?

Автор a-two

Ответов: 11
Просмотров: 1283
Последний ответ 03.11.2020, 16:57:40
от Nikolay89
Как сделать плавающий блок/модуль. Пример есть!

Автор Good_user

Ответов: 8
Просмотров: 11700
Последний ответ 04.04.2020, 13:49:11
от jan_dax