计算 css 纵向（2/3 比例）和横向（3/2 比例）图像的相对宽度

Question

我正在努力寻找数学公式，让我可以将 1 张横向图像和 1 张纵向图像放在一行中，并在随机宽度的容器中添加填充。

我确实设法让两个图像在不添加填充的情况下正确对齐，但是一旦我这样做，公式就会停止工作。两张图片的比例均为 2/3，并且它们具有响应性，因此即使您调整 window 大小时它们仍保持对齐，我花了一整天试图弄清楚如何让它工作但没有成功。

这是完整的代码。

.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 具有相同的高度？

Answer 1

您需要在计算中考虑填充。当您添加填充时，您会将两个容器内的图像宽度减小 25px，这将使高度也减小，但由于比率不相同，因此高度不会同样减小。第一个是 25px * 2/3 (16.67px)，第二个是 25px * 3/2 (37.5px)。所以第一个比第二个高

要解决此问题，我们需要为两个容器使用不同的填充或更改宽度计算。对于第二种方案，我们需要考虑减小第一种的宽度，增加第二种的宽度。让我们考虑两个 div 之间的高度差，它等于 37.5px - 16.67px = 5/6 * 25px。我们拆分这个差异：第一个 div 需要减少 5/12 * 25px，第二个需要增加 5/12 * 25px，这样两个 div 的高度就会相等。

然后我们使用比率来计算我们需要的宽度add/reduce。第一个是 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.

的填充

让我们在第二个 div 中保留 25px 的填充，这将使图像的高度降低 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 的填充需要更大才能具有相同的高度差。

更新

很明显，第一个解决方案解决了对齐问题，但我们的总宽度与 100% 不同，仅仅是因为我们删除了一个值并添加了另一个值，两者不相等，所以我们有一个总宽度等于 100% - ((25px * 5/8) - (25px * 5/18)。然后我们缺少 (25px * 25/72).

如果我们需要获得 100% 的总宽度，我们需要考虑按照比例增加这个值，以保持相同的增加高度¹。假设我们想将 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)}

Answer 2

计算错误。

您的评价 9 : 4 是正确的。等于 3 : 2 * 2/3.

你忘记的是padding。现在你的 .image-landscape, .image-portrait css 属性 of 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>

Answer 3

这种方式适用于任何比例的图像，只要横向和纵向的高度相同

.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>

计算 css 纵向（2/3 比例）和横向（3/2 比例）图像的相对宽度

calc relative width in css of portrait (2/3 ratio) and landscape(3/2 ratio) image

html

css

math

css-calc

计算 css 纵向（2/3 比例）和横向（3/2 比例）​​图像的相对宽度

calc relative width in css of portrait (2/3 ratio) and landscape(3/2 ratio) image

html

css

math

css-calc

计算 css 纵向（2/3 比例）和横向（3/2 比例）图像的相对宽度