什么是最好的弹性框包装器/图像配置

Question

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

与其说"这一切都取决于情况"，不如有人可以通过一些连贯的逻辑来解释这些不同的场景？我想知道为什么每次的结果都不同。我不太关心图像的比例，但更关心图像的位置取决于视口大小。 假设我使用对象拟合：覆盖所有场景。 下面是将两个图像并排放置的示例。

索引.html

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

风格.css

section {
display: flex;
}

场景 1

风格.css

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

场景 2

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

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

风格.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%;
}

塞纳里奥 5

风格.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 像素和页面高度的 768 像素。此行为将忽略任何内容 您用于其包装器的配置，即图。

• 将 img 宽度设置为 100%，这意味着您已经强制元素粘附在其容器的宽度上(在本例图中)。因此，在这种情况下，弹性配置将生效。

• 在场景#2中，您已将弹性项目(即图形)的宽度设置为其容器(即部分)的100%。但它设置了图形的初始宽度！这意味着除非您尚未将 flex-shrink 设置为 0，否则图形将被缩小以满足 Flexbox 的规格。
弹性
• 框规范说，虽然弹性包装是默认行为的nowrap，但容器的宽度将平等地分配给项目。由于您这里有两个项目(两个数字)，每个项目的宽度将缩小到其容器(即部分)的 50%。
• 结果现在很明显。图像将缩小到其容器的 100%，而容器又具有其容器的 50%，您将看到两个图像彼此并排。
• 当您为图形元素设置宽度：400px时，该元素是弹性项目，浏览器以某种方式忽略了它，并替换为浏览器计算的宽度。 Flex-Shrink，Flex-Grow是其中的两个。当你说flex：50%时，你没有改变flex-grow和flex-shrink默认值(即1)允许浏览器缩小项目以将它们放在一行中(如flex-wrap：nowrap说这样做！
• 因此，在弹性基础为 50% 的场景 #3 中，指定的宽度将被忽略，元素的基本宽度将是其容器的 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%设置具有优先级的弹性基础。
  • 图像被拉伸到正好是 400 像素乘 400 像素，这可能会导致它水平溢出。
• 场景 4
  • 这些数字被告知它们不能超过 400px，因此如果它们的父项的 50% 大于此，它们将是 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 */

再说一次，您可能希望元素整齐地放入列中，在这种情况下，figure元素周围的包装器上的flex: 50%可能会更好。无论如何，在测试时为元素添加背景颜色总是有帮助的！