Адаптивный ресайз блоков по высоте и ширине

[vip]

Люди добрые помогите скриптом, решающим адаптивный ресайз блока по высоте и ширине по отношению к его родителю.

Нашел вот такой скрипт http://habrahabr.ru/post/187406/

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

[Aleksandr.L]

Use flexbox.

[vip]

Use flexbox.

 

разве скриптом не проще?

[jdk]

Если выложите кусочек кода будет проще. Пока что то вроде этого.

Edited February 24, 2015 by jdk

[vip]

Сейчас попробую изобразить, чего хочу.

Edited February 24, 2015 by vip

[vip]

Пока вот такое

 

https://jsfiddle.net/digitalmedia/ok6hbpx6/4/

 

Нужно чтобы блок aspectRatio пропорционально тянулся на 100% ширину и 70% высоту родителя, в зависимости, что больше.

Т.е. если окно броузера уменьшить по высоте, то aspectRatio будет по высоте занимать 70% родителя, но будет узким,

если же окно браузера сделать узким и высоким, то наоборот, по ширине занимает 100%, апо высоте подстраивается.

[jdk]

Так? aspectRatio на 100% ширины и 70% высоты.

[vip]

Не совсем то,

вот так должно работать, только относительно родителя а не viewport

 

http://jsfiddle.net/danield770/8VJ38/410/

Edited February 25, 2015 by vip

[Aleksandr.L]

Нужно чтобы блок aspectRatio пропорционально тянулся на 100% ширину и 70% высоту родителя

<div class="parent">    <div class="child"></div></div> 

.parent {    width: ...;    height: ...;}.child {    width: 100%;    height: 70%;} 

[vip]

Нужно чтобы блок aspectRatio пропорционально тянулся на 100% ширину и 70%

 

здесь ключевое слово пропорционально, а если просто сделать через css, то будет тупо тянутся на все доступное место.

[jdk]

Вы в paint нарисуйте картинку с подписями, а то я запутался, что и куда должно тянуться.

[vip]

Спасибо за терпение :-)

 

Сейчас понимаю, что в % как я описал ранее  этого не добиться.
Нужно соотношение сторон в единицах.

Опишу в px чтобы было понятно. при соотношении ширина/высота=2/1

Ширина родителя 1000px.
высота родителя 500px.

Соответственно адаптивный блок внутри займет все пространство родителя поскольку соотношение сторон совпадает- 2/1

Если сделать окно браузера уже, и размеры родителя окажутся 500x500px, то адаптивный блок станет размером 500x250px.
поскольку соотношение сторон 1/2.

То же смое если деалем окно браузера маленьким по высоте, размер родителя например 200x1000px, тогда адаптивный блок должен
быть 200x400px. т.е. не превышать размер родителя по высоте

 

здесь: http://jsfiddle.net/danield770/8VJ38/410/

все очень наглядно если ресайзить блок. именно так надо.