Chrome 中的 Flexbox 高度损坏 [关闭]答案

【问题标题】：Flexbox Height broken in Chrome [closed]Chrome 中的 Flexbox 高度损坏 [关闭]
【发布时间】：2020-01-18 17:23:18
【问题描述】：

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

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

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

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

【问题讨论】：

当我在 Chrome 中查看时，我在控制台中收到一条错误消息：Mixed Content: The page at 'https://dresscode.danhakimi.com/why-i-love-belted-coats-and-cinched-waists/' was loaded over HTTPS, but requested an insecure script 'http://s.imgur.com/min/embed.js'. This request has been blocked; the content must be served over HTTPS. -
我指的画廊不是 imgur 画廊。不过，我会努力的。谢谢。
您可以将图像的height 属性设置为auto：.l-post-content figure .kg-gallery-image img { display: block; margin: 0; width: 100%; height: auto; } 我不确定Chrome为什么将图像的初始高度设置为0，但因为您有高度设置为100%，它将是它的容器的100% - 在这种情况下为0。设置为auto也将避免图像拉伸
嘿嘿嘿！我想我没有尝试弄乱图像本身，只是它周围的 div 。现在我只需要弄清楚变焦废话！您可以将其发布为答案，以便我可以给您加分吗？

标签： css frontend web-frontend ghost-blog

【解决方案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 将设置相对于图像本身的高度。这也将解决您的拉伸问题。

【讨论】：