Question

我在理解Flexbox中不同的图像尺寸配置时遇到了一些困难。似乎每次尝试应用它们时，都会得到不同的结果。

有人会说一些不同情况下的连贯逻辑，而不是说“一切都取决于情况”吗？我想知道为什么每次结果都不一样。我不太在乎图像的比例，而更多地取决于视口大小的图像位置。假设我在所有情况下都使用object-fit：cover。这是一个将两个图像并排放置的示例。

index.html

<section>
        <figure>
                <img src="profile image1.jpg" alt="">

        </figure>
        <figure>
                <img src="profile image2.jpg" alt="">
        </figure>
</section>

style.css

section {
  display: flex;
}

场景1

style.css

    /* figure wrapper's dimension is set, but not those of the images */
    figure {
      flex: 50%;
      width: 100%;
      height: auto;
    }

场景2

style.css

   /* figure wrapper's dimension and the images' dimension are both set with a percentage unit */
    figure {
      flex: 50%;
      width: 100%;
      height: auto;
    }

    img {
      width: 100%;
      height: 100%;
    }

场景3

style.css

/* figure wrapper's dimension and the images' dimension are both set with the pixel unit */
figure {
  flex: 50%;
  width: 400px;
  height: 400px;
}

img {
  width: 400px;
  height: 400px;
}

方案4

style.css

/* figure's dimension is set with max-width and max-height */
figure {
  flex: 50%;
  max-width: 400px;
  max-height: 400px;
}

img {
  width: 100%;
  height: 100%;
}

Senario 5

style.css

/* figure's dimension and image's dimension are set with max-width and max-height */
figure {
  flex: 50%;
  max-width: 400px;
  max-height: 400px;
}

img {
  max-width: 100%;
  max-height: 100%;
}

我想我最终想弄清楚将图像放入具有不同像素/百分比尺寸单位配置的容器中有什么好处。

Answer 1

未设置图像宽度（场景1），图像将使用其原始宽度和高度，例如，如果您正在使用尺寸为1024 * 768的图像，则它将填充您的页面宽度的1024 px和页面高度的768px。此行为将忽略任何内容您用于其包装器的配置，即图。
已将img宽度设置为100％，这意味着您已强制元素遵守其容器的宽度（在本例中为该图）。因此，在这种情况下，flex配置生效。
在场景2中，您已将弹性项目（即图形）的宽度设置为其容器（即部分）的100％。但是它设置了图形的初始宽度！这意味着除非您没有将flex-shrink设置为0，否则该数字将缩小以符合Flexbox的规格。
Flexbox规范指出，当now-rap是wrap-wrap时（这是默认行为），容器的宽度将平均分配给这些物品。由于您在此处有两个项目（两个数字），每个项目的宽度都会缩小到其容器的50％（即部分）。
结果现在显而易见。图片将缩小到其容器的100％，容器又将缩小到其容器的50％，您将看到彼此相邻的两个图像。
当您设置宽度：图元素的400px时，它是一个弹性项目，它在某种程度上被浏览器忽略，并由浏览器计算的宽度替换。 flex-shrink，flex-grow是其中两个。当您说flex：50％时，您没有更改flex-grow和flex-shrink默认值（即1），允许浏览器缩小项目以将它们定位在一行中（如flex-wrap：nowrap所说的那样！）
结果是，在方案3中，伸缩基础为50％，指定的宽度将被忽略，元素的基础宽度将为其容器的50％。但是，当然，它们会缩小，以便最终的宽度能够使图形项彼此相邻，并且img标签会粘附其容器的宽度并覆盖它们（将调整大小以填充它们）
在方案＃4和＃5中，您已设置了图形项目的最大宽度。这样做会削减浏览器的计算宽度，这意味着它将覆盖使用上述规则计算的浏览器的所有内容。不管您使用px还是百分之百指定宽度，如果浏览器计算的宽度大于指定的最大宽度，则最终宽度将更改为最大宽度。

Answer 2

场景1
- 图像使用其自然大小。如果它们小于弹性框，则将它们向左对齐，或将它们各自的弹性框（如文本）对齐，形成两列。如果它们更大，则会溢出。因此，我建议不要这样做。
- flex: 50%是flex-basis: 50%; flex-grow: 1; flex-shrink: 1的简写。这些数字既有flex-basis也有width，这是没有用的。仅考虑弹性基础。因此，该算法将首先在其父级宽度的50％处创建图形，然后将其增长或均匀缩小以适合所述父级。如我之前所说，无论图像太大，图像都会溢出。
场景2
- 就像在场景1中一样，图中的width: 100%是没有用的。
- 同时提供height和width的图像会使它们拉伸以填充其父级。在这种情况下，我不知道确定其大小的确切算法，因为我从不这样做。在这种情况下，我建议仅设置width，以便自动选择图像的高度以符合纵横比。
方案3
- 图中400px的宽度和高度被忽略，因为flex: 50%设置了具有优先权的柔韧性基础。
- 图像被精确地拉伸为400px x 400px，这可能导致图像水平溢出。
场景4
- 这些数字被告知，它们不能超过400px，因此，如果其父级的50％大于400px，则它们的宽度将为400px。由于未设置高度，并且子代的相对高度为100％，因此他们的高度设置为最大高度400px。如果有人对这种行为有更好的解释，请分享评论。
- 图像被拉伸以完全填充弹性盒，而失去其原始纵横比。
场景5
- 这些数字的行为与情况4相同。
- 如果图像比其父图像宽，则图像将保持其原始尺寸，但在这种情况下，图像会缩小。由于max-width和max-height均已设置，因此图像可能会在此过程中失去其原始纵横比。

另一个建议

您根本不需要使数字增长。如果要样式化样式并将图例添加到图像，这可能是理想的。示例：

section {
  display: flex;
}
figure {
  background-color: #dca;
  padding: 20px;
}
img {
  max-width: 100%;
}

<!-- PS: the width and height attributes on img tags emulate actual image size -->
<section>
  <figure>
    <img width="200" height="100" alt="">
    <legend>Fig. 1</legend>
  </figure>
  <figure>
    <img width="400" height="100" alt="">
    <legend>Fig. 2</legend>
  </figure>
</section>

任何元素的默认弹性样式为：

flex-grow: 0;      /* do not grow */
flex-shrink: 1;    /* shrink automatically to fit parent */
flex-basis: auto;  /* but otherwise determine size based on content */

然后再次，您可能希望元素整齐地放入列中，在这种情况下，flex: 50%元素周围的包装上的figure可能更好。无论如何，在进行测试时始终可以为元素添加背景色！

最佳的flexbox包装器/图像配置是什么？

2 个答案:

另一个建议