Для div сделать height: auto;

  • 7 Ответов
  • 509 Просмотров

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

*

Оффлайн kik84

Для div сделать height: auto;
« : 11.05.2015, 21: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

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

*

Оффлайн Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Re: Для div сделать height: auto;
« Ответ #2 : 13.05.2015, 20:28:33 »
Если нужно, чтобы тянулся сам блок, только:
а) вставлять изображение
б) растягивать скриптом
Если нужно оптимальное заполнение фоновой картинкой, то:
background-size:cover;
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Оффлайн Bozhkov2

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

*

Оффлайн Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Re: Для div сделать height: auto;
« Ответ #4 : 19.05.2015, 15:06:16 »
flex ещё недостаточно поддерживается, на мой взгляд.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Оффлайн Bozhkov2

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

*

Оффлайн Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Re: Для div сделать height: auto;
« Ответ #6 : 19.05.2015, 15:56:23 »
А я как сказал? ^-^ Так то он со дня выхода поддерживается полностью. Просто не у всех что тогда, что сейчас последние версии браузеров. А на некоторых проектах использовать флекс в принципе недопустимо, т.к. многие предприятия сидят на фиксированных старых версиях. Одно дело когда css3-красоты не видно у клиента, другое flex-модель и развалившаяся вёрстка.
Дополню: Свойство поддерживается EI от 11-й (!) версии. Даже в Windows 8 по-умолчанию идёт десятый IE. Т.е. 11-й идёт в десятой винде. Можно загуглить долю 10-й винды на рынке десктопных ОС. Но суть думаю понятна.
« Последнее редактирование: 19.05.2015, 16:00:53 от Shustry »
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Оффлайн Bozhkov2

Re: Для div сделать height: auto;
« Ответ #7 : 19.05.2015, 17:48:52 »
Можно еще загуглить долю IE ;). Конечно это дело каждого, как делать. Я предложил вариант, вы предупредили. Дело сделано :). Но Chrome, Opera, Mozilla отображают отлично.