LINUX.ORG.RU

Зафиксировать пропорции у блока

 , ,


1

2

Можно ли как-то сделать пропорционально масштабируемый блок, если ширину и высоту задавать в процентах, а не в пикселях? Желательно, чтоб при уменьшении высоты браузера не вылазил скроллбар, а блок уменьшался, сохраняя пропорции.


Можно, но зачем? Возникнут проблемыс контентом блока. Лучше манипулировать медиазапросами и вьюпортом.

xtala ()
Ответ на: комментарий от Deleted

но тогда вложенные блоки не масштабируются, а обрезаются. при width:auto; height: 90vh или 100% занимают всю область (там должно быть 2 столбика)

el-d ()

Ты неправильно задаёшь вопрос. Нужно написать что ты делаешь.

anonymous ()
Ответ на: комментарий от Deleted

нет, в столбиках изображения-ссылки без текста. Надо чтоб весь сайт казался одним цельным изображением и ничего не разъезжалось при других разрешениях

el-d ()
Последнее исправление: el-d (всего исправлений: 2)
Ответ на: комментарий от el-d

блин, дак ты бы с этого и начинал, тогда тебе поможет flexbox

Deleted ()

Мдя, сейчас тебе тут насоветуют... Всё предельно легко реализуется через обычный css. Создается родительский блок с необходимой шириной, внутри него ещё один, с position: relative, высота которого должна быть равна нулю, ширина 100%, и padding-top,в котором указывается процентное соотношение высоты к ширине (56.25% - 16:9, 75% - 4:3 и тд), внутри ещё один блок, с position: absolute, а также left, right, top и bottom равные нулю. Держи полностью рабочий готовый пример.

И последнее - как правильно посчитать значение для padding-top: (высота/ширина)*100%. 16:9 - (9/16)*100=56.25%

Если остались какие-то вопросы по поводу примера - смело задавай.

mr_Heisenberg ()
Ответ на: комментарий от mr_Heisenberg

Спасибо, то что нужно!

Только как вложенные блоки по центру выровнять? margin: 0 auto; что-то не выравнивает.

И можно ли сделать так, чтоб родительский блок не превышал высоту браузера?

el-d ()
Ответ на: комментарий от el-d

С margin 0 auto - вполне как вариант. А вот с высотой браузера надо поразмыслить... Вечерком отвечу, а то сейчас в маршрутке, ещё и с работы устал.

mr_Heisenberg ()
Ответ на: комментарий от el-d

Что ж, наиболее изящным решением будет использовать вычисляемую ширину из смеси calc(), vh и vw для блока с классом necessary-width. Итак из 100vw вычесть разницу 100vw и 100vh, умноженного на нужный коэффициент. К тому же для этого блока надо задать max-width: 100%, иначе он будет вылазить за ширину. Готовый код должен выглядеть вот так, пробелы внутри calc() важны, без них работать не будет. Думаю дальше разберёшься. Единственный минус - не все браузеры поддерживают calc(), vh и vw (пруф 1 и пруф 2). Поиск наименее костыльного костыля я возлагаю на твои плечи, удачи ;)

mr_Heisenberg ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.