относительная ширина calc в css портретного (соотношение 2/3) и альбомного (соотношение 3/2) - PullRequest
Новая
       12

относительная ширина calc в css портретного (соотношение 2/3) и альбомного (соотношение 3/2)

0 голосов
/ 25 августа 2018

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

Мне удалось настроить оба изображения правильно, без добавления отступов, но как только формула перестала работать. Оба изображения имеют соотношение 2/3, и они чувствительны, поэтому они остаются выровненными, даже когда вы изменяете размер окна, я потратил целый день, пытаясь понять, как заставить его работать, но безуспешно.

Вот полный код. 

.image-landscape, .image-portrait {
  float: left;
}
.image-landscape {
  width: calc(100% * 9 / 13);
  padding-left: 20px;
  padding-right: 5px;
}
.image-landscape + .image-portrait {
  width: calc(100% * 4 / 13);
  padding-left: 5px;
  padding-right: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css">
<div class="row">
  <div class="image-landscape">
    <img src="https://dummyimage.com/831x554/404040/fff&text=1" width="831" height="554">
  </div>
  <div class="image-portrait">
    <img src="https://dummyimage.com/369x554/404040/fff&text=2" width="369" height="554">
  </div>
</div>

Как вы можете видеть, оба div не имеют одинаковую высоту в отличие от удаления отступов.

Как сделать так, чтобы оба div имели одинаковую высоту с отступом?

Ответы [ 3 ]

0 голосов
/ 26 августа 2018

Расчет был неверным.

Вы оцениваете 9 : 4 правильно.Что равно 3 : 2 * 2/3.

То, что вы забыли, это padding.На данный момент ваше .image-landscape, .image-portrait css свойство box-sizing равно inherit.Который содержит padding как ширину и высоту.

Таким образом, высота может иметь смещение, связанное с вашим padding.

Если вы добавите отступы, как указано для .image-portrait

padding-left: calc(5px * 4 / 9);
padding-right: calc(20px * 4 / 9);

Тогда оба изображения сохранят свое соотношение, и их высота может быть одинаковой.

Но я думаю, что вы хотели оставить одинаковое padding для обоих изображений.

Пожалуйста, проверьте следующее code-snippet. 

.image-landscape,
.image-portrait {
  float: left;
}

.first .image-landscape {
  width: calc((100%) * 9 / 13);
  padding-left: 20px;
  padding-right: 5px;
}
.first .image-landscape + .image-portrait {
  width: calc((100%) * 4 / 13);
  padding-left: calc(5px * 4 / 9);
  padding-right: calc(20px * 4 / 9);
}

.second {
  margin-top: 30px;
}

.second .image-landscape,
.second .image-portrait {
  box-sizing: content-box;
}

.second .image-landscape {
  width: calc((100% - 50px) * 9 / 13);
  padding-left: 20px;
  padding-right: 5px;
}

.second .image-portrait {
  width: calc((100% - 50px) * 4 / 13);
  padding-left: 5px;
  padding-right: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css">
<div class="row first">
  <h1>1. Padding with Rate</h1>
  <div class="image-landscape">
    <img src="https://dummyimage.com/831x554/404040/fff&text=1" width="831" height="554">
  </div>
  <div class="image-portrait">
    <img src="https://dummyimage.com/369x554/404040/fff&text=2" width="369" height="554">
  </div>
</div>
<div class="row second">
  <h1>2. Keep Padding</h1>
  <div class="image-landscape">
    <img src="https://dummyimage.com/831x554/404040/fff&text=1" width="831" height="554">
  </div>
  <div class="image-portrait">
    <img src="https://dummyimage.com/369x554/404040/fff&text=2" width="369" height="554">
  </div>
</div>
0 голосов
/ 27 августа 2018

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

.image-landscape {
  width: calc(100% * (796 + 25) / (796 + 25 + 354 + 25));
  padding-left: 20px;
  padding-right: 5px;
  float: left;
}

.image-portrait {
  float: left;
  width: calc(100% * (354 + 25) / (796 + 25 + 354 + 25));
  padding-left: 5px;
  padding-right: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css">
<div class="row">
  <div class="image-landscape">
    <img src="https://dummyimage.com/796x531/404040/fff&text=1" width="796" height="531">
  </div>
  <div class="image-portrait">
    <img src="https://dummyimage.com/354x531/404040/fff&text=2" width="354" height="531">
  </div>
</div>
0 голосов
/ 25 августа 2018

Вы должны учитывать заполнение в расчете. Когда вы добавите отступы, вы уменьшите ширину изображения внутри обоих контейнеров на 25px, что также приведет к уменьшению высоты, но, поскольку соотношение не одинаково, высота не будет уменьшаться одинаково. Для первого это будет 25px * 2/3 (16.67px), а для второго будет 25px * 3/2 (37.5px). Вот почему первый стал выше второго.

Чтобы исправить это, нам нужно либо использовать разные отступы для обоих контейнеров, либо изменить расчет ширины. Для второго решения нам нужно рассмотреть уменьшение ширины первого и увеличение ширины второго. давайте рассмотрим разницу в высоте между обоими элементами, которая равна 37.5px - 16.67px = 5/6 * 25px. Разобьем эту разницу: первый div нужно уменьшить на 5/12 * 25px, а второй увеличить на 5/12 * 25px, чтобы оба div стали равными по высоте.

Затем мы используем соотношение, чтобы рассчитать ширину, которую нам нужно добавить / уменьшить. Это 5/12 * 3/2 * 25px = 5/8 * 25px для первого и 5/12 * 2/3 * 25px = 5/18 * 25px для второго. 

.image-landscape, .image-portrait {
  float: left;
}
.image-landscape {
  width: calc((100% * 9 / 13) - (25px * 5/8));
  padding-left: 20px;
  padding-right: 5px;
}
.image-landscape + .image-portrait {
  width: calc((100% * 4 / 13) + (25px * 5/18));
  padding-right: 20px;
  padding-left: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css">
<div class="row">
  <div class="image-landscape">
    <img src="https://dummyimage.com/831x554/404040/fff&text=1" width="831" height="554">
  </div>
  <div class="image-portrait">
    <img src="https://dummyimage.com/369x554/404040/fff&text=2" width="369" height="554">
  </div>
</div>

Первое решение проще, но оно не будет хорошим, как другое, поскольку у нас не будет такого же отступа, поэтому оно не будет выглядеть однородным. Идея состоит в том, чтобы определить отступы для одного div, вычислить убывающую высоту, а затем использовать эту высоту, чтобы найти отступы для другого div.

Давайте оставим 25px отступа во втором div, это уменьшит высоту изображения на 25px * 3/2 (как ранее). Давайте определим P как отступ первого, и у нас будет уменьшение на P * 2/3. Нам нужно, чтобы оба значения были равны, что сделает P равным 25px * 9/4, которое мы можем разделить на обе стороны: 

.image-landscape, .image-portrait {
  float: left;
}
.image-landscape {
  width: calc(100% * 9 / 13);
  padding-left: calc(20px * 9/4);
  padding-right: calc(5px * 9/4);
}
.image-landscape + .image-portrait {
  width: calc(100% * 4 / 13);
  padding-right: 20px;
  padding-left: 5px;
}

.row {
  border:1px solid;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css">
<div class="row">
  <div class="image-landscape">
    <img src="https://dummyimage.com/831x554/404040/fff&text=1" width="831" height="554">
  </div>
  <div class="image-portrait">
    <img src="https://dummyimage.com/369x554/404040/fff&text=2" width="369" height="554">
  </div>
</div>

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

UPDATE

Понятно, что первое решение решает проблему выравнивания, но у нас общая ширина отличается от 100% просто потому, что мы удалили значение и добавили другое значение, и оба не равны, поэтому у нас общая ширина равна 100% - ((25px * 5/8) - (25px * 5/18). Затем нам не хватает (25px * 25/72).

Если нам нужно получить общую ширину 100%, нам нужно рассмотреть возможность добавления этого значения, соблюдая соотношение, чтобы сохранить одинаковую высоту увеличения 1 . Предположим, мы хотим добавить X к первому и Y ко второму, тогда у нас будут следующие уравнения: 

 X + Y = 25px * (25/72)
 X * 2/3 = Y * 3/2

После решения этой проблемы мы получим: Y = 25px * 25/234 и X = 25px * 25/104 

.image-landscape, .image-portrait {
  float: left;
}
.image-landscape {
  width: calc((100% * 9 / 13) - (25px * 5/8) + (25px * 25/104));
  padding-left: 20px;
  padding-right: 5px;
}
.image-landscape + .image-portrait {
  width: calc((100% * 4 / 13) + (25px * 5/18) + (25px * 25/234));
  padding-right: 20px;
  padding-left: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation-float.css">
<div class="row">
  <div class="image-landscape">
    <img src="https://dummyimage.com/831x554/404040/fff&text=1" width="831" height="554">
  </div>
  <div class="image-portrait">
    <img src="https://dummyimage.com/369x554/404040/fff&text=2" width="369" height="554">
  </div>
</div>

1: Первоначально я пропустил эту часть, потому что думал, что она сделает весь комплекс отсчетов, и тогда у нас будет всего несколько пикселей разницы (8px)

...