图的最大高度不考虑父母的尺寸
我img在液体中有一个元素div。该img max-height设置为100％。因此，如果图像比div高，则应将其渲染为与div一样高。
.png文件的原始大小为200x200。在我的浏览器中，div显示为284x123。因此，应将img渲染为123x123，以保持其宽高比。
但是，img打破了div的界限，仍然显示为200x200。我似乎无法弄清楚为什么会这样。
这是在Chrome上发生的，但不是在Firefox上发生的（我上次尝试）。
左侧 ，您会看到一个灰色箭头，即我正在谈论的.png。右侧的箭头是SVG文件，可以正常工作。
编辑：
我创建了一个单独的，其中img的max-height似乎可以正常工作。.我找不到导致该问题的项目不上班。
问题答案：
我想到了。为了使元素的最大高度起作用，其父元素之一必须height定义一个属性（显然以固定单位（例如px），而不是百分比）。
从w3c规格：
相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则将百分比值视为“
0”（对于“ min-height”）或“ none” （对于“最大高度”）。
由于我的img父级都没有定义固定的高度，因此我不得不将img限制为最大宽度。
编辑
我使用了该线程中提供的解决方法，并使用了position: absolute; max-height: 100%; top: 0。
-
我正在使用图表 （http://chartjs.org）。我试图给我的图表一个特定的高度，但它没有采取它。图表设置为响应式，因此我使用宽度100%。请检查下面的代码和笔。 Javascript/**线图*/ 断续器 CoDepen-http://codepen.io/rushenn/pen/PwGjOr 如何在响应式图表上设置特定高度？
-
问题内容： 我试图了解什么对我来说似乎是意外的行为： 我在容器内有一个最大高度为100％的元素，该元素也使用最大高度，但是，出乎意料的是，子代溢出了父代： 但是，如果给定父级的显式高度，则此问题已解决： 有谁知道为什么孩子在第一个例子中不尊重父母的最大身高？为什么需要一个明确的高度？ 问题答案： 当您指定的百分比上一个孩子，这是父母的实际高度的百分比，而不是父母的，奇怪的。同样适用于。 因此，如果
-
我试图理解我的意外行为： 容器中有一个最大高度为100%的元素，该容器也使用了最大高度，但意外的是，子元素溢出了父元素： 测试用例：http://jsfiddle.net/bq4Wu/16/ 但是，如果为父级指定了明确的高度，则这是固定的： 测试用例：http://jsfiddle.net/bq4Wu/17/ 有人知道第一个例子中孩子为什么不尊重父母的最大身高吗？为什么需要明确的高度？
-
我很想知道相互独立的最大位图宽度和高度是多少。我确实发现最大尺寸是32768x32768，但这只是一个完美的正方形吗？32768x32768=1073741824是我可以玩的像素总数吗？我可以在宽度和高度之间重新排列这些像素，只要总数不超过？ 如果我这样做，我不会有任何错误： 将位图变暗为位图=新位图（450100000） 即使我无法在保存后打开图像（我不需要这样做），我仍然能够使用位图，但我相信
-
问题内容： 我通过设置找到了一种使div容器至少占据整个页面高度的方法。但是，当我添加一个嵌套div和set时，它不会扩展到容器的高度。有办法解决吗？ 问题答案： 这是一个已报告的Webkit（chrome /safari）错误，具有最小身高的父母的孩子不能继承height属性： : 显然Firefox也受到了影响（目前无法在IE中进行测试） 可能的解决方法： 添加位置：相对于#containme
-
问题内容： 我正在尝试编写一个分为三部分的搜索菜单。如果没有足够的垂直空间显示结果，则每个部分都会有一个滚动条。 在Chrome和Firefox中，每个菜单都显示其滚动条，但是在IE11上，菜单与包装器重叠。 我已经编写了一个可在Chrome和Firefox上运行的示例（Firefox很棘手，我需要添加多个菜单级别）。 我在IE 11上缺少什么吗？ 问题答案： 要在Chrome，Safari，Fi