Вопросы Теги

Ширина должна быть равна высоте блока [duplicate]

Могу я просто добавить; люди всегда предполагают, что это компьютерная проблема, но если вы считаете своими руками (база 10), вы не можете получить (1/3+1/3=2/3)=true, если у вас нет бесконечности, чтобы добавить 0.333 ... в 0.333 ... так, как и с (1/10+2/10)!==3/10 в базе 2, вы обрезаете ее до 0,333 + 0,333 = 0,666 и, вероятно, округлите ее до 0,677, что также будет технически неточным.

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

18
задан web-tiki 29 April 2016 в 11:23
поделиться

4 ответа

Вы можете использовать изображение с требуемыми пропорциями, чтобы помочь с пропорциональным размером (изображения можно масштабировать пропорционально, установив одно измерение в какое-то значение, а другое - в автоматическое). Изображение не должно быть видимым, но оно должно занимать пространство. 

.box {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
}
.size-helper {
  display: block;
  width: auto;
  height: 100%;
}
.inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 153, .8);
}
<div class="box">
  <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">
  <div class="inner">
    1. box has fluid height<br>
    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>
    2.1 it thus maintains width = 200% of height<br>
    2.2 it defines the dimensions of the box<br>
    3. inner expands as much as box
  </div>
</div>

В приведенном выше примере поле, внутреннее и хелпер имеют одинаковый размер.

22
ответ дан Salman A 1 September 2018 в 03:30
поделиться

Я не могу найти чистое решение CSS. Вот решение, использующее JavaScript-библиотеку CSS Element Queries . 

var aspectRatio = 16/9;
var element = document.querySelector('.center');
function update() {
  element.style.width = (element.clientHeight * aspectRatio) + 'px';
}

new ResizeSensor(element, update);
update();

CodePen demo!

0
ответ дан Neal Ehardt 1 September 2018 в 03:30
поделиться

Трюк CSS, который вы написали, отлично работает, чтобы сохранить отношение width / height к элементу. Он основан на свойстве padding, когда его значение в процентах пропорционально ширине родителя, даже для padding-top и padding-bottom.

Не существует свойства CSS, которое могло бы установить горизонтальный размер пропорционально высоте родителя. Поэтому я думаю, что нет чистого CSS-решения.

5
ответ дан tzi 1 September 2018 в 03:30
поделиться

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

vh 1 / 100th высоты окна просмотра. ( MDN )

DEMO 

.box {
    position: absolute;
    height:50vh;
    width:100vh;
    bottom: 0;
    background:teal;
}
<div class="box"></div>

13
ответ дан web-tiki 1 September 2018 в 03:30
поделиться