Как сделать динамическое изменение высоты пустого блока?

Question

[Sarkis Arutiunian]

Столкнулся с небольшой проблемой, по черновой ссылке: usagid.com/pages/hotel/hotel_result.html

В блоке с заведением при изменении ширины окна браузера изменяется только ширина блока с картинкой (картинка задана как бекграунд, сам блок пустой).

Перепробовал все, что знал, даже свойство clientWidth в js мне не помогло, чтобы как-то это автоматизировать, так как записывает в переменную текущее значение и при дальнейшем изменении размеров окна соотношение остается прежним.

Буду рад любому варианту решения данной проблемы, все будет интересно в познавательных целях)

Answer 1

[Александр]

Вариант 1 - отрабатывать событие resize
Вариант 2 - юзать vw

Comments

[Sarkis Arutiunian]

спасибо! vw меня спас)) очень интересный универсальный способ, пока не сталкивался с таким

[Sarkis Arutiunian]

кстати еще один вопрос, если вы не против напишу в комментарии. Все по той же ссылке у элементов поиска я сделал простой эффектнаведениф в виде border но при этом при наведении если обратить внимание все элементы двигаются (Видимо из за падинга) а у последнего в списке при наведении сьезжает картинка вниз. Это можно как то исправить? думаю если бы выделение происходило снаружи блока все было бы норм?

[Кирилл Туровников]

Sarkis Arutiunian: в зависимости от формы блока, можно например обводку сделать тенью, либо у элемента сделать по дефолту прозрачный бордер, и еще возможно у вас стоит box-sizing: border-box

[Sarkis Arutiunian]

Кирилл Туровников: хм, да про прозрачный бордер кстати не плохая идея)

Answer 2

[Grigruss]

div.some-block{
    background:url('some.img')no-repeat center;
    background-size: contain;
}

background-size
Размером блока я думаю умеете управлять.

Answer 3

[Stalker_darkway]

Картинку надо не бэкграундом прописывать, а в html впихнуть.

Comments

[Sarkis Arutiunian]

нет я не хочу картинкой, собственну по этому и вопрос про пустой блок)