Flexbox 高度在 Chrome

Question

上下文在这里可能重要也可能不重要：我通过 Buster 在 Github 页面上使用 Ghost。 Buster 是一个从本地 Ghost 博客生成静态站点的工具，这样它就可以在静态站点托管上正常托管。我正在寻求帮助的博客 post 位于此处：http://dresscode.danhakimi.com/why-i-love-belted-coats-and-cinched-waists/。检查元素似乎非常有效，比我在这里复制所有相关的 HTML、CSS 和 Javascript 更有效。作为免责声明：我编写了这段代码的 none，我不是专业的开发人员，但我已经玩够了 Web 前端技术，所以我应该能够理解其中的大部分内容。

除了我稍后会提到的一个细节外，这在多个平台上的 Firefox 和 Internet Explorer 中运行良好。在 safari 中，图像可以显示，但似乎无法正确设置高度，至少在我的笔记本电脑上是这样——在全屏模式下，图像被拉长了，但是当我改变 window 的高度时它们反应很好.所以我很确定问题涉及不同浏览器处理自适应高度的方式......但我不知道如何处理。

奇怪的是 Chrome 中发生的事情（在桌面和 android 中）：图像根本不可见。我进去检查元素，然后...让图像显示的唯一方法是将 kg-gallery-row 的高度设置为固定像素数。显然，这不是一个实用的解决方案——我希望高度能够响应地、正确地设置……我看到很多指南都在谈论将 flexbox 高度设置为 100%，但是无论在哪里，这都没有任何作用我做到了。

最后一个值得考虑的细节——尽管这是一个不太重要的问题——是 none 个可缩放框在任何浏览器中都可以在本地或生产环境中正确打开。他们似乎瞄准了更远的某个区域。如果您能提供帮助，我将不胜感激，但当务之急是让画廊展出。

Answer 1

每个回答请求：

您可以将图片的高度设置为auto。

.l-post-content figure .kg-gallery-image img { 
    display: block; 
    margin: 0; 
    width: 100%; 
    height: auto; 
}

看起来 Chrome 正在将容器高度设置为 0。因此，如果您将图像高度设置为 100%，这意味着其容器高度的 100% - 即 0。

设置 height: auto 将设置相对于图像本身的高度。这也将解决您的拉伸问题。

Flexbox 高度在 Chrome

Flexbox Height broken in Chrome

css

frontend

web-frontend

ghost-blog