No Image

Css calc height from width

СОДЕРЖАНИЕ
445 просмотров
10 марта 2020

Можно ли получить ширину блока и применить ее для высоты?

Как то так:
height: calc(width * 2);

  • Вопрос задан более двух лет назад
  • 2273 просмотра

Да, можно, например, с помощью псевдоэлементов. Блок всегда заданных пропорций (высота считается как % от ширины): https://jsfiddle.net/Ankhena/cLhxv7eq/
В примере всегда квадратный блок, для изменения пропорций нужно изменять %%

Через переменные не получится, потому что:
либо мы знаем ширину в точках или vw – тогда не нужен calc
либо она у нас в процентах – получим проценты, но проценты эти будут от высоты родителя, а не ширины. (Собственно для умножения процентов тоже не нужен calc)

k-2 calc имеет смысл, если мы хотим сложить, например, % и пиксели. Потому что не знаем 90% это сколько пикселей на данный момент.
Если мы хотим 90% умножать на 2, то в состоянии сразу написать 180%, а не напрягать браузер излишними пересчетами.
Кроме того, если ширина 90%, а высоте мы зададим 180%, то не получим высоту в 2 раза больше ширины.

А вот вариант задавать высоту через vw может помочь.

k-2, со смартфона не удобно делать примеры jsfiddle
Доберусь до компа сделаю.

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

I have implemented a GoogleMapsV3 map in a twitterBootstrap basic responsive design site.

But my question is quite simple: i have:

I’d like to be able to change the height to a form factor. Like in this "in my dreams CSS"

I have tried leaving out height, setting to auto, and all sorts of persentages – but only to make the div collapse on me always.

Читайте также:  Как почистить мундштук от смолы

I have no problem writing a js-solution, but hope for a simple cleancut CSS solution, possible CSS3

If not possible, what would be the optimal way to js me out of this?? (timers, events. or the like)

10 Answers 10

For this, you will need to utilise JavaScript, or rely on the somewhat supported calc() CSS expression.

Or using CSS calc (see support here: http://caniuse.com/calc)

Here it is. Pure CSS. You do need one extra ‘container’ element.

The fiddle

The solution.

Note I’m using an 100% throughout the example. You can use whichever percentage you’d like.

Since height percentages are relative to the height of the parent element, we can’t rely on it. We must rely on something else. Luckily padding is relative to the width – whether it’s horizontal or vertical padding. In padding-xyz: 100% , 100% equals 100% of the box’s width.

Unfortunately, padding is just that, padding. The content-box’s height is 0. No problem!

Stick an absolutely positioned element, give it 100% width, 100% height and use it as your actual content box. The 100% height works because percentage heights on absolutely positioned elements are relative to the padding-box of the box their relatively positioned to.

На этой странице

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

Синтаксис

Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов :

+ Сложение Вычитание. * Умножение. По крайней мере хоть один из сомножителей должен быть – тип хранения данных в CSS представляющий собой число: либо целое, либо с дробной частью."> . / Деление. Делитель должен быть – тип хранения данных в CSS представляющий собой число: либо целое, либо с дробной частью."> .

Читайте также:  Data protection manager 2012 r2

Операнды в expression могут быть различными выражениями . Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

Формальный синтаксис

Примеры

Позиционирование объекта в окне с помощью отступа

calc() делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px.

Автоматическое изменение размера формы ввода для соответствия размеру контейнера

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

Давайте посмотрим некоторый код CSS:

Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию calc() , которая вычитает 1em из ширины блока. Теперь применим этот CSS к следущему HTML-коду:

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

Это интересно
Adblock
detector