我相信我可能在 chrome 中发现了一个错误，当容器内容的大小取决于父项的大小时，试图在一个轴(高度，比如说)上调整容器的大小，而容器的宽度取决于那个的内容。图示:
容器高度→子高度→子宽度→容器宽度
箭头表示“影响”。
当您在 javascript 中更改容器的高度时，该错误就会出现。子元素的大小会发生变化以反射(reflect)容器的大小，但容器的宽度直到下一次调整元素大小时才发生变化(元素的其他变化也可以触发此)
这是我的意思的一个例子:
<!doctype html5>
<html>
<head>
<script type="text/javascript">
doStuff = function() {
div = document.getElementById('div');
img = document.getElementById('img');
button = document.getElementById('button');
button.addEventListener('click', function () {
if (div.style.height == '200px') {
div.style.height = '100px';
} else {
div.style.height = '200px';
}
});
};
</script>
<style>
div {
height: 200px;
width: auto;
display: inline-block;
}
img {
height: 100%;
width: auto;
}
</style>
</head>
<body onload="doStuff();">
<h1>Test</h1>
<div id="div">
<img id="img" src="http://fishface.org.uk/uploads/images/random/whybird.jpg" alt="why">
</div>
<div>
<img src="http://fishface.org.uk/uploads/images/random/whybird.jpg" alt="why">
</div>
<p><button id="button">resize</button></p>
</body>
</html>
这是一个 live example .如您所见，div 被赋予固定高度和自动宽度，而子项(图像)被赋予 100% 高度(即容器的高度)和自动宽度(即与高度成比例缩放。)您在 chrome 中调整容器的大小，高度发生变化但宽度保持不变。当您第二次调整大小时，高度会变回并且宽度会更改为第一次调整大小时应该的值。在 Firefox 上的行为符合预期，在现代 IE 上，宽度从不改变。
所以我的问题是:这真的是 Chrome 中的错误吗？或者我在 CSS 中做了一些非法的事情？在任何一种情况下，解决方法是什么？在这个简单的示例和我的实际情况中，我可以改为调整图像的大小，但假设我绝对必须调整 div 的大小 - 有没有办法做到这一点？
最佳答案
我会说这是一个错误。更具体地说，它没有正确处理 inline-block 元素内的 inline 元素(img)的大小调整，同时保持适当的纵横比。
作为此处的解决方法，只需为您的图像设置display:block，它就会按预期工作。
让我们检查一下行为:我们将图像 300x317 显示在 inline-blok 容器 200xAuto 中，并在维护后生成尺寸 长宽比:200x189。现在将容器的高度更改为 100xAuto，我们得到结果大小 100x189，但由于保持纵横比，子图像也调整了大小。所以我想说，容器保持 100x189 大小的原因是由于一个路径回流的缺点，但是如果您将图像显示设置为 block，那么在那个场景图像将导致自下而上回流，并且容器获得新的大小:它知道 child 的正确大小而不是100x189并采用新维度 100x93。
回流实际上是非常昂贵的，所以这种行为最终是由于内联元素回流触发器的优化
关于javascript - CSS 大小相互依赖和通过 Chrome 中的 JS 调整大小 : possible bug?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36777478/