Question

我有一个包含内容的模态，此内容容器是带有flex-direction: column的flex容器。它具有三项，用justify-content: space-between分隔。中间项目是具有一定最大宽度的图像。我为此图像设置了不同的断点，以确保它对于较小的视口没有太大的宽度。如果宽度太大，则高度也会增加，然后向下推动页脚项目，这将创建滚动条。

这里是一个示例：https://jsfiddle.net/a5r6d0wn/3/。在此示例中，它看起来不错，但是如果将图像的最大宽度提高到500px，则可以看到它将页脚向下推并创建了滚动条。可能与我在内容上设置height: 100%有关，但是我不确定如何才能确保内容占其允许高度的100％？

这不是很可靠，我无法为所有不同的设备设置正确的断点，有时这肯定是不正确的，并且对用户来说很糟糕。我想要的是：

1）所有内容始终显示在屏幕上，这意味着我必须确保图像永远不会太大。

2）图片应尽可能大，以使其对用户而言看起来不错。

因此，有一种方法可以说：“嘿，您的手！您可以自由支配，可以随意增长，但是永远不会增长到足以产生溢出的程度，并且用户必须滚动才能看到您下面的内容！”？任何帮助表示赞赏！

Answer 1

在您的JSFiddle示例中，我相信只需将max-width上的100%更改为.image即可实现所需的行为。这将限制图像永远不会大于其容器，并且您的flex容器将完成其余工作。

这适用于已经与模态一样大的图像。对于小于模态的图像，图像将保持其原始大小，并且不会放大。如果您希望这种行为，那么解决方案会涉及更多一点。您必须先为图像提供一个容器（我建议<figure>），然后应用以下内容：

.figure {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  overflow: hidden;
}

.image {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

神奇之处在于align-self，overflow和object-fit：

align-self: stretch让图形占据容器的整个宽度
overflow: hidden强制图形不超过其伸缩容器的分配高度
object-fit: contain告诉图像不要拉伸

Here's a fork of your fiddle demonstrating this。

如何确保img最大宽度永远不会使flex兄弟姐妹溢出父级

1 个答案: