Html 在我添加另一个元素之前，图像在flexbox中会完全调整大小_Html_Css_Image_Flexbox_Resize

Html 在我添加另一个元素之前，图像在flexbox中会完全调整大小

html css image

Html 在我添加另一个元素之前，图像在flexbox中会完全调整大小,html,css,image,flexbox,resize,Html,Css,Image,Flexbox,Resize,我正在尝试创建一个全屏图像视图。除了全屏图像，他们还可以选择显示有关该图像的一些信息（标题、描述、标签等）如果我有这样的东西 <html> <div class="container"> <img src="https://i.insider.com/5c65a75d74c587423d6a711a?width=1100&format=jpeg"/> </div> </html> 无论我对窗口的高度有多

我正在尝试创建一个全屏图像视图。除了全屏图像，他们还可以选择显示有关该图像的一些信息（标题、描述、标签等）

如果我有这样的东西

<html>
  <div class="container">
      <img src="https://i.insider.com/5c65a75d74c587423d6a711a?width=1100&format=jpeg"/>
  </div>
</html>

无论我对窗口的高度有多大的干扰，图像的大小都会清晰地调整

但是当我在img之后向标记添加另一个div，并再次尝试调整高度时。。。图像仅在部分脱离页面运行后才开始调整大小

我怎样才能防止呢

我基本上希望底部div（informational div）根据其内容自动调整大小，并在可用空间内调整图像大小以适应需要

错误：当另一个元素位于flexbox中时，图像未及时调整大小。被切断。

好：当图片在flexbox中单独显示时，它的大小调整得很好。

在您提到的代码笔中，

标签

s被标记为

显示：块

，因此每个标签占用每行的全宽空间。只需删除

块

默认值为

内联块

.container{
显示器：flex；
柔性流动：柱；
对齐项目：居中；
证明内容：中心；
宽度：100%；
身高：100%；
背景颜色：橙色；
左：0；
排名：0；
位置：固定；
}
img{
最大宽度：90%；
最高高度：90%；
}
.随机分组{
背景颜色：蓝色；
边缘顶部：2倍；
}


嘿
嘿
嘿
嘿
嘿
嘿
嘿

在您提到的代码笔中，

标签

s被标记为

显示：块

，因此每个标签占用每行的全宽空间。只需删除

块

默认值为

内联块

.container{
显示器：flex；
柔性流动：柱；
对齐项目：居中；
证明内容：中心；
宽度：100%；
身高：100%；
背景颜色：橙色；
左：0；
排名：0；
位置：固定；
}
img{
最大宽度：90%；
最高高度：90%；
}
.随机分组{
背景颜色：蓝色；
边缘顶部：2倍；
}


嘿
嘿
嘿
嘿
嘿
嘿
嘿

您想将额外信息放在哪里？最好与底部对齐。我相信我可以在信息部分使用margin top auto。在这种情况下，您不想使用

justify content:center

。这就是问题的根源。如果删除该规则，溢出将停止。如果必须垂直居中，请改用

auto

边距。如果我这样做，从底部调整大小会切断页面底部的任何内容，而不是开始调整照片的大小。有什么想法吗？最后一个难题是为我的图像指定一个最小高度和最大高度。然后所有的东西都按比例放在一起。你想把额外的信息放在哪里？最好放在底部。我相信我可以在信息部分使用margin top auto。在这种情况下，您不想使用

justify content:center

。这就是问题的根源。如果删除该规则，溢出将停止。如果必须垂直居中，请改用

auto

边距。如果我这样做，从底部调整大小会切断页面底部的任何内容，而不是开始调整照片的大小。有什么想法吗？最后一个难题是为我的图像指定一个最小高度和最大高度。然后所有的东西都按比例放在一起。这不是我要找的。分区中的内容不重要。这并不能解决问题。它还在那里。只是图像的一小部分在调整大小时被切断了。好吧，如果你从html中的标记中删除div，让我编辑我的回答。你会明白我的意思的。图像在flexbox中单独存在时如何调整大小，以及在存在其他元素时如何调整大小是不同的。我不知道该怎么办，这不是我想要的。分区中的内容不重要。这并不能解决问题。它还在那里。只是图像的一小部分在调整大小时被切断了。好吧，如果你从html中的标记中删除div，让我编辑我的回答。你会明白我的意思的。图像在flexbox中单独存在时如何调整大小，以及在存在其他元素时如何调整大小是不同的。我不知道该怎么办。

.container {
display: flex;
flex-flow:column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: orange;
left: 0;
top: 0;
position: fixed;
}

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