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

1

2

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

Ссылка

←	Локаль по умолчанию в PHP

django-modeladmin-reorder

→

конечно можно, ширину можно задавать в %, или vw, высоту в % или vh

Deleted
(03.11.16 05:28:13 MSK)

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

~~xtala~~
(03.11.16 09:17:40 MSK)

Ссылка

Ответ на: комментарий от Deleted 03.11.16 05:28:13 MSK

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

~~el-d~~ ★★
(03.11.16 13:48:42 MSK) автор топика

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

anonymous
(03.11.16 17:59:49 MSK)

Ссылка

Ответ на: комментарий от el-d 03.11.16 13:48:42 MSK

2 столбика чего? если текста то задай родителю column-count

Deleted
(04.11.16 05:31:08 MSK)

Ответ на: комментарий от Deleted 04.11.16 05:31:08 MSK

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

~~el-d~~ ★★
(04.11.16 09:00:03 MSK) автор топика
Последнее исправление: el-d 04.11.16 09:01:19 MSK (всего исправлений: 2)

Ответ на: комментарий от el-d 04.11.16 09:00:03 MSK

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

Deleted
(04.11.16 10:13:36 MSK)

Ссылка

Мдя, сейчас тебе тут насоветуют... Всё предельно легко реализуется через обычный 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 ★
(08.11.16 06:28:51 MSK)

Ответ на: комментарий от mr_Heisenberg 08.11.16 06:28:51 MSK

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

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

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

~~el-d~~ ★★
(10.11.16 16:37:37 MSK) автор топика

Ответ на: комментарий от el-d 10.11.16 16:37:37 MSK

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

mr_Heisenberg ★
(10.11.16 17:13:31 MSK)

Ссылка

Ответ на: комментарий от el-d 10.11.16 16:37:37 MSK

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