5

Натыкался на множество ответов на вопрос "Как сделать height = width". Но мне нужно наоборот: приравнять width к height при динамической height.

Есть растянутый на всю высоту элемента span

.span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  color: #fff;
}

Мне нужно сделать его ширину равную высоте. Как это можно сделать, с учетом того, что родитель span-а может изменить свою высоту? Желательно css, но видимо без js не получится

5
  • 1
    Думаю, без js/jquery тут не обойтись
    – Cheg
    11 июл 2017 в 11:38
  • @Cheg Сейчас сделаю на jquery, но все равно подожду еще ответов
    – Mr Klonwar
    11 июл 2017 в 12:09
  • @Mr Klonwar обновил ответ
    – soledar10
    11 июл 2017 в 12:42
  • @Cheg ширина должна зависит от высоты - 1 вариант так и работает, взависимости от высоты изменяется и ширина
    – soledar10
    11 июл 2017 в 13:13
  • @soledar10 а при чем тут vh, если ширина должна изменяться в зависимости от высоты блока, а не от высоты viewport?
    – Cheg
    11 июл 2017 в 13:20

2 ответа 2

1

Ширина равная высоте:

div {
  position: relative;
}

textarea {
  position: relative;
  z-index: 10;
  opacity: .35;
  display: block;
  background: rgba(170, 171, 221, 0.61)
}

span {
  position: absolute;
  left: 0;
  top: 100%;
  bottom: -100%;
  background: rgba(255, 0, 0, 0.5);
  transform: rotate(-90deg);
  transform-origin: 0 0;
  writing-mode: vertical-lr;
}
<div>
  <textarea>textarea для ресиза

нужно сделать ширину равную высоте
  </textarea>

  <span>
    123
  </span>
</div>

0
0

Вариант зависимости ширины от высоты

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.b {
    position: relative;
}

.b-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100vh;
    width: 100vh;
    background: #ccc;
}
<div class="b">
    <div class="b-inner"></div>
</div>

Вариант зависимости высоты от ширины

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.aspect-ratio-1 {
  padding-bottom: 100%; /* (value height = value width) = 1 * 100% = 100%  */
  position: relative;
  background: #999;
}

.aspect-ratio-1-inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
<div class="aspect-ratio-1">
  <div class="aspect-ratio-1-inner"></div>
</div>

5
  • И где тут решение? В вопросе же сказано, что нужно ширину прировнять к высоте, а не наоборот - как у вас.
    – Cheg
    11 июл 2017 в 11:53
  • Нет, не подходит( В моем коде из динамического height должен вычисляться wigth, если я все правильно понял, то тут наоборот. Да и мой .span должен быть absolute, так уж вышло
    – Mr Klonwar
    11 июл 2017 в 11:54
  • @Cheg равенство - коммутативная операция вроде как..
    – Darth
    11 июл 2017 в 11:55
  • @Cheg обновил ответ
    – soledar10
    11 июл 2017 в 12:44
  • 1
    Vh не подойдет, мне нужно растянуть span не на высоту экрана, а на высоту родителя. VH растянет на высоту viewport-a, по простому, окна браузера
    – Mr Klonwar
    11 июл 2017 в 15:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.